|
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