Skip to content

Commit

Permalink
docs: open/close events
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrieljablonski
gabrieljablonski committed Oct 31, 2023
1 parent 96dec1c commit 74c9e2a
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 12 deletions.
4 changes: 3 additions & 1 deletion docs/docs/examples/events.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ Events available in ReactTooltip component.

:::danger

This has been deprecated. Use the `openOnClick` tooltip prop instead.
This has been deprecated. Use `openOnClick`, or `openEvents`, `closeEvents`, and `globalCloseEvents` instead.

See the [options page](../options.mdx#available-props) for more details.

:::

Expand Down
11 changes: 7 additions & 4 deletions docs/docs/options.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,17 +103,20 @@ import { Tooltip } from 'react-tooltip';
| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
| `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 |
| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead |
| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element |
| `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 |
| `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 |
| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
| `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"`) |
| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
| `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) |
| `closeOnResize` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
| ~~`closeOnEsc`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Pressing escape key will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead. |
| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead. |
| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead. |
| `openEvents` | `Record<string, boolean>` | no | `mouseenter` `focus` | `mouseenter` `focus` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip |
| `closeEvents` | `Record<string, boolean>` | no | `mouseleave` `blur` | `mouseleave` `blur` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip |
| `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`) |
| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip |
| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
| `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`) |
Expand Down
20 changes: 13 additions & 7 deletions docs/docs/upgrade-guide/changelog-v4-v5.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,15 @@ If you run into any problems with the tooltip not updating after changes are mad
- [x] `float` - `boolean` - used to achieve V4's `effect="float"`
- [x] `hidden` - `boolean` - when set, the tooltip will not show
- [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)
- [x] `closeOnEsc` - `boolean` - when set, the tooltip will close after pressing the escape key
- [x] `closeOnScroll` - `boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)
- [x] `closeOnResize` - `boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)
- [x] `closeOnEsc` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close after pressing the escape key~~
- [x] `closeOnScroll` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)~~
- [x] `closeOnResize` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)~~

:::note

Use `globalCloseEvents` instead of `closeOnEsc`, `closeOnScroll`, and `closeOnResize`. See the [options page](../options.mdx#available-props) for more details.

:::

## `V4` props available in `V5`

Expand All @@ -78,10 +84,10 @@ If you run into any problems with the tooltip not updating after changes are mad
- [x] `delayHide` - also available on anchor element as `data-delay-hide`
- [ ] `delayUpdate` - can be implemented if requested
- [x] `delayShow` - also available on anchor element as `data-delay-show`
- [ ] `event`
- [ ] `eventOff`
- [x] `event` - functionality changed and renamed to `openEvents`
- [x] `eventOff` - functionality changed and renamed to `closeEvents`
- [ ] `isCapture`
- [ ] `globalEventOff`
- [x] `globalEventOff` - functionality changed and renamed to `globalCloseEvents`
- [ ] `getContent` - pass dynamic values to `content` instead
- [x] `afterShow`
- [x] `afterHide`
Expand All @@ -92,7 +98,7 @@ If you run into any problems with the tooltip not updating after changes are mad
- [x] `wrapper` - also available on anchor element as `data-tooltip-wrapper`
- [ ] `bodyMode`
- [x] `clickable`
- [ ] `disableInternalStyle`
- [x] `disableInternalStyle` - renamed to `disableStyleInjection`

### Detailed informations

Expand Down

0 comments on commit 74c9e2a

Please sign in to comment.