|
8 | 8 | A React hook to effortlessly build smart tooltips. Based on [react-popper](https://github.com/FezVrasta/react-popper)
|
9 | 9 | and [popper.js](https://popper.js.org).
|
10 | 10 |
|
11 |
| -## Docs |
| 11 | +## NOTE |
12 | 12 |
|
13 |
| -NOTE: This is the documentation for v4.x which introduced the `usePopperTooltip` hook. |
14 |
| - |
15 |
| -If you're looking for the render prop version, |
| 13 | +> - This is the documentation for 4.x which introduced the `usePopperTooltip` hook. |
| 14 | +> - If you're looking for the render prop version, |
16 | 15 | see [3.x docs](https://github.com/mohsinulhaq/react-popper-tooltip/blob/v3/README.md).
|
17 |
| - |
18 |
| -If you're moving from 3.x render prop to 4.x hook, read our [migration guide](migrating.md). |
| 16 | +> - If you're looking to upgrade from 3.x render prop to 4.x hook, please refer to our [migration guide](migrating.md). |
19 | 17 |
|
20 | 18 | ## Examples
|
21 | 19 |
|
22 |
| -- Basic usage [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/basic) [Source](/examples/basic) |
23 |
| -- Animating appearance with react-spring [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/animation) [Source](/examples/animation) |
24 |
| -- Closing tooltip with Esc button [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/close-on-esc) [Source](/examples/close-on-esc) |
25 |
| -- Using as a controlled component [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/) [Source](/examples/controlled) |
26 |
| -- Persist the tooltip in the DOM once it's mounted [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/persist-once-mounted) [Source](/examples/persist-once-mounted) |
27 |
| -- Using with react portal [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/portal) [Source](/examples/portal) |
28 |
| -- Implementing render prop API [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/render-prop) [Source](/examples/render-prop) |
| 20 | +- Basic usage [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/basic) ([Source](/examples/basic)) |
| 21 | +- Animating appearance with react-spring [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/animation) ([Source](/examples/animation)) |
| 22 | +- Closing tooltip with Esc button [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/close-on-esc) ([Source](/examples/close-on-esc)) |
| 23 | +- Using as a controlled component [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/) ([Source](/examples/controlled)) |
| 24 | +- Persist the tooltip in the DOM once it's mounted [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/persist-once-mounted) ([Source](/examples/persist-once-mounted)) |
| 25 | +- Using with react portal [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/portal) ([Source](/examples/portal)) |
| 26 | +- Implementing render prop (v3) API [Demo](https://codesandbox.io/s/github/mohsinulhaq/react-popper-tooltip/tree/master/examples/render-prop) ([Source](/examples/render-prop)) |
29 | 27 |
|
30 | 28 |
|
31 | 29 | ## Installation
|
32 | 30 |
|
33 |
| -You can install **react-popper-tooltip** with [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/). |
| 31 | +You can install **react-popper-tooltip** with [npm](https://www.npmjs.com) or [yarn](https://yarnpkg.com). |
34 | 32 |
|
35 | 33 | ```bash
|
36 | 34 | npm i react-popper-tooltip
|
@@ -174,7 +172,7 @@ placed 4px away from the trigger element (to reserve enough space for the arrow
|
174 | 172 | We use this default value to match the size of the arrow element from our default CSS file. Feel free to change it if you are using your
|
175 | 173 | own styles.
|
176 | 174 |
|
177 |
| -See [offset modifier docs](https://popper.js.org/docs/v2/modifiers/offset/). |
| 175 | +See [offset modifier docs](https://popper.js.org/docs/v2/modifiers/offset). |
178 | 176 |
|
179 | 177 | `popperOptions` takes precedence over this option.
|
180 | 178 |
|
@@ -260,7 +258,7 @@ It returns the merged props that you need to pass to tooltip element.
|
260 | 258 | - `popperProps: { update, forceUpdate, state }`
|
261 | 259 |
|
262 | 260 | Some props returned by the underlying `usePopper` hook.
|
263 |
| -See [https://popper.js.org/react-popper/v2/hook/](https://popper.js.org/react-popper/v2/hook/). |
| 261 | +See [https://popper.js.org/react-popper/v2/hook](https://popper.js.org/react-popper/v2/hook). |
264 | 262 |
|
265 | 263 | This doesn't include `styles` and `attributes` props. They are included into `getArrowProps` and `getTooltipProps` prop
|
266 | 264 | getters.
|
0 commit comments