diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 01083381..4bdb006a 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -88,48 +88,48 @@ import { Tooltip } from 'react-tooltip'; #### Available props -| name | type | required | default | values | description | -| ----------------------- | -------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ref` | Tooltip reference | no | | `React.useRef` | Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx). | -| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | -| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | -| `content` | `string` | no | | | Content to be displayed in tooltip (`html` prop is priorized over `content`) | -| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to be displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | -| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | -| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | -| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | -| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | -| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | -| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | -| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | -| `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~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | -| `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~~
**DEPRECATED**
Use `globalCloseEvents` instead. | -| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | -| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | -| `openEvents` | `Record` | no | `mouseenter` `focus` | `mouseenter` `focus` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip | -| `closeEvents` | `Record` | no | `mouseleave` `blur` | `mouseleave` `blur` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip | -| `globalCloseEvents` | `Record` | 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`) | -| `imperativeModeOnly` | `boolean` | no | `false` | `true` `false` | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details | -| `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`) | -| `defaultIsOpen` | `boolean` | no | `false` | `true` `false` | It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default. | -| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | -| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | -| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden | -| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | -| `border` | CSS border | no | | a CSS border style | Change the style of the tooltip border (including the arrow) | -| `opacity` | CSS opacity | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip | -| `arrowColor` | CSS color | no | | a CSS background color | Change color of the tooltip arrow | -| `disableStyleInjection` | `boolean` or `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details | -| `role` | React.AriaRole | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements | +| name | type | required | default | values | description | +| ----------------------- | -------------------------------------- | -------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ref` | Tooltip reference | no | | `React.useRef` | Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx). | +| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | +| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | +| `content` | `string` | no | | | Content to be displayed in tooltip (`html` prop is priorized over `content`) | +| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to be displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | +| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | +| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | +| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | +| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | +| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | +| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | +| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | +| `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~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | +| `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~~
**DEPRECATED**
Use `globalCloseEvents` instead. | +| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | +| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | +| `openEvents` | `Record` | no | `mouseover` `focus` | `mouseover` `focus` `mouseenter` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip | +| `closeEvents` | `Record` | no | `mouseout` `blur` | `mouseout` `blur` `mouseleave` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip | +| `globalCloseEvents` | `Record` | 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`) | +| `imperativeModeOnly` | `boolean` | no | `false` | `true` `false` | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details | +| `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`) | +| `defaultIsOpen` | `boolean` | no | `false` | `true` `false` | It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default. | +| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | +| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | +| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden | +| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | +| `border` | CSS border | no | | a CSS border style | Change the style of the tooltip border (including the arrow) | +| `opacity` | CSS opacity | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip | +| `arrowColor` | CSS color | no | | a CSS background color | Change color of the tooltip arrow | +| `disableStyleInjection` | `boolean` or `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details | +| `role` | React.AriaRole | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements | diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index dd387bbb..d99345ad 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -102,8 +102,9 @@ const Tooltip = ({ const actualOpenEvents: AnchorOpenEvents = openEvents ? { ...openEvents } : { - mouseenter: true, + mouseover: true, focus: true, + mouseenter: false, click: false, dblclick: false, mousedown: false, @@ -112,14 +113,16 @@ const Tooltip = ({ Object.assign(actualOpenEvents, { mouseenter: false, focus: false, + mouseover: false, click: true, }) } const actualCloseEvents: AnchorCloseEvents = closeEvents ? { ...closeEvents } : { - mouseleave: true, + mouseout: true, blur: true, + mouseleave: false, click: false, dblclick: false, mouseup: false, @@ -128,6 +131,7 @@ const Tooltip = ({ Object.assign(actualCloseEvents, { mouseleave: false, blur: false, + mouseout: false, }) } const actualGlobalCloseEvents: GlobalCloseEvents = globalCloseEvents @@ -540,7 +544,7 @@ const Tooltip = ({ handleHideTooltip() } - const regularEvents = ['mouseenter', 'mouseleave', 'focus', 'blur'] + const regularEvents = ['mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'focus', 'blur'] const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup'] Object.entries(actualOpenEvents).forEach(([event, enabled]) => { diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index cf8802f1..6289d799 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -88,6 +88,7 @@ export interface TooltipRefProps { export type AnchorOpenEvents = { mouseenter?: boolean focus?: boolean + mouseover?: boolean click?: boolean dblclick?: boolean mousedown?: boolean @@ -95,6 +96,7 @@ export type AnchorOpenEvents = { export type AnchorCloseEvents = { mouseleave?: boolean blur?: boolean + mouseout?: boolean click?: boolean dblclick?: boolean mouseup?: boolean