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