Skip to content

Commit 74c9e2a

Browse files
gabrieljablonskigabrieljablonski
committed
docs: open/close events
1 parent 96dec1c commit 74c9e2a

File tree

3 files changed

+23
-12
lines changed

3 files changed

+23
-12
lines changed

‎docs/docs/examples/events.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ Events available in ReactTooltip component.
88

99
:::danger
1010

11-
This has been deprecated. Use the `openOnClick` tooltip prop instead.
11+
This has been deprecated. Use `openOnClick`, or `openEvents`, `closeEvents`, and `globalCloseEvents` instead.
12+
13+
See the [options page](../options.mdx#available-props) for more details.
1214

1315
:::
1416

‎docs/docs/options.mdx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,17 +103,20 @@ import { Tooltip } from 'react-tooltip';
103103
| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
104104
| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content |
105105
| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead |
106-
| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element |
106+
| `openOnClick` | `boolean` | no | `false` | `true` `false` | When enabled, the tooltip will open on click instead of on hover. Use `openEvents`, `closeEvents`, and `globalCloseEvents` for more customization |
107107
| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
108108
| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
109109
| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
110110
| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
111111
| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
112112
| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
113113
| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
114-
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
115-
| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) |
116-
| `closeOnResize` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
114+
| ~~`closeOnEsc`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Pressing escape key will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead. |
115+
| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead. |
116+
| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead. |
117+
| `openEvents` | `Record<string, boolean>` | no | `mouseenter` `focus` | `mouseenter` `focus` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip |
118+
| `closeEvents` | `Record<string, boolean>` | no | `mouseleave` `blur` | `mouseleave` `blur` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip |
119+
| `globalCloseEvents` | `Record<string, boolean>` | no | | `escape` `scroll` `resize` `clickOutsideAnchor` | Global events to be listened to close the tooltip (`escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`) |
117120
| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip |
118121
| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
119122
| `isOpen` | `boolean` | no | | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |

‎docs/docs/upgrade-guide/changelog-v4-v5.md

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,15 @@ If you run into any problems with the tooltip not updating after changes are mad
5050
- [x] `float` - `boolean` - used to achieve V4's `effect="float"`
5151
- [x] `hidden` - `boolean` - when set, the tooltip will not show
5252
- [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details)
53-
- [x] `closeOnEsc` - `boolean` - when set, the tooltip will close after pressing the escape key
54-
- [x] `closeOnScroll` - `boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)
55-
- [x] `closeOnResize` - `boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)
53+
- [x] `closeOnEsc` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close after pressing the escape key~~
54+
- [x] `closeOnScroll` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)~~
55+
- [x] `closeOnResize` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)~~
56+
57+
:::note
58+
59+
Use `globalCloseEvents` instead of `closeOnEsc`, `closeOnScroll`, and `closeOnResize`. See the [options page](../options.mdx#available-props) for more details.
60+
61+
:::
5662

5763
## `V4` props available in `V5`
5864

@@ -78,10 +84,10 @@ If you run into any problems with the tooltip not updating after changes are mad
7884
- [x] `delayHide` - also available on anchor element as `data-delay-hide`
7985
- [ ] `delayUpdate` - can be implemented if requested
8086
- [x] `delayShow` - also available on anchor element as `data-delay-show`
81-
- [ ] `event`
82-
- [ ] `eventOff`
87+
- [x] `event` - functionality changed and renamed to `openEvents`
88+
- [x] `eventOff` - functionality changed and renamed to `closeEvents`
8389
- [ ] `isCapture`
84-
- [ ] `globalEventOff`
90+
- [x] `globalEventOff` - functionality changed and renamed to `globalCloseEvents`
8591
- [ ] `getContent` - pass dynamic values to `content` instead
8692
- [x] `afterShow`
8793
- [x] `afterHide`
@@ -92,7 +98,7 @@ If you run into any problems with the tooltip not updating after changes are mad
9298
- [x] `wrapper` - also available on anchor element as `data-tooltip-wrapper`
9399
- [ ] `bodyMode`
94100
- [x] `clickable`
95-
- [ ] `disableInternalStyle`
101+
- [x] `disableInternalStyle` - renamed to `disableStyleInjection`
96102

97103
### Detailed informations
98104

0 commit comments

Comments
 (0)