Skip to content

Commit 2d921d7

Browse files
gabrieljablonskigabrieljablonski
committed
docs: deprecate events prop and attribute
1 parent 8bec90d commit 2d921d7

File tree

3 files changed

+23
-25
lines changed

3 files changed

+23
-25
lines changed

Diff for: ‎docs/docs/examples/events.mdx

+6-9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ sidebar_position: 1
66

77
Events available in ReactTooltip component.
88

9+
:::danger
10+
11+
This has been deprecated. Use the `openOnClick` tooltip prop instead.
12+
13+
:::
14+
915
import { Tooltip } from 'react-tooltip'
1016
import 'react-tooltip/dist/react-tooltip.css'
1117

@@ -34,15 +40,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3440
)
3541
}
3642

37-
:::note
38-
39-
In a previous version, `click` had a different behavior, so it made sense to be enabled alongside `hover`.
40-
Since that's changed, enabling both events `events={['hover', 'click']}` has the same effect of simply enabling `hover`.
41-
42-
In the future, we should simply have a prop to enable `click` mode.
43-
44-
:::
45-
4643
### Using `hover`
4744

4845
:::info

Diff for: ‎docs/docs/options.mdx

+16-15
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,20 @@ import 'react-tooltip/dist/react-tooltip.css';
5959

6060
#### Available attributes
6161

62-
| name | type | required | default | values | description |
63-
| ------------------------------ | ------- | -------- | ---------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
64-
| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
65-
| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) |
66-
| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip |
67-
| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
68-
| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
69-
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
70-
| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
71-
| data-tooltip-events | string | false | `hover` | `hover click` `hover` `click` | Events to watch for when handling the tooltip state |
72-
| data-tooltip-position-strategy | string | false | `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 |
73-
| data-tooltip-show | number | false | | any `number` | The delay (in ms) before showing the tooltip |
74-
| data-tooltip-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
75-
| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
62+
| name | type | required | default | values | description |
63+
| ------------------------------ | ---------- | --------- | ----------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
64+
| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
65+
| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) |
66+
| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip |
67+
| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
68+
| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
69+
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
70+
| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
71+
| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead |
72+
| data-tooltip-position-strategy | string | false | `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 |
73+
| data-tooltip-show | number | false | | any `number` | The delay (in ms) before showing the tooltip |
74+
| data-tooltip-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
75+
| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
7676

7777
### Props
7878

@@ -109,7 +109,8 @@ import 'react-tooltip/dist/react-tooltip.css'
109109
| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
110110
| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
111111
| `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 |
112-
| `events` | `string[]` | no | `hover` | `hover` `click` | Events to watch for when handling the tooltip state |
112+
| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead |
113+
| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element |
113114
| `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 |
114115
| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
115116
| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |

Diff for: ‎docs/docs/upgrade-guide/changelog-v4-v5.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ If you run into any problems with the tooltip not updating after changes are mad
4444
## New Props
4545

4646
- [x] `classNameArrow`
47-
- [x] `events` (or `data-tooltip-events` on anchor element) - `['hover', 'click']` - default: `['hover']` (always an array when using as prop, even with only one option, when using as data attribute: `data-tooltip-events="hover click"`)
47+
- [x] `openOnClick` - `boolean` - when set, the tooltip will open on click instead of on hover
4848
- [x] `isOpen` - `boolean` (to control tooltip state) - if not used, tooltip state will be handled internally
4949
- [x] `setIsOpen` - `function` (to control tooltip state) - if not used, tooltip state will be handled internally
5050
- [x] `position` - `{ x: number; y: number }` - similar to V4's `overridePosition`

0 commit comments

Comments
 (0)