diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
index 4bdb006a..ea7aefab 100644
--- a/docs/docs/options.mdx
+++ b/docs/docs/options.mdx
@@ -127,6 +127,7 @@ import { Tooltip } from 'react-tooltip';
| `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 |
+| `disableTooltip` | `function` | no | | | A function that takes a ref to each anchor element and returns a boolean indicating whether to hide the tooltip for that specific anchor. |
| `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 |
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 37487927..1471e930 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -56,6 +56,7 @@ const Tooltip = ({
position,
afterShow,
afterHide,
+ disableTooltip,
// props handled by controller
content,
contentWrapperRef,
@@ -459,11 +460,14 @@ const Tooltip = ({
const elementRefs = new Set(anchorRefs)
anchorsBySelect.forEach((anchor) => {
+ if (disableTooltip?.(anchor)) {
+ return
+ }
elementRefs.add({ current: anchor })
})
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
- if (anchorById) {
+ if (anchorById && !disableTooltip?.(anchorById)) {
elementRefs.add({ current: anchorById })
}
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index 6289d799..ee7fc42c 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -152,6 +152,7 @@ export interface ITooltip {
setIsOpen?: (value: boolean) => void
afterShow?: () => void
afterHide?: () => void
+ disableTooltip?: (anchorRef: HTMLElement | null) => boolean
activeAnchor: HTMLElement | null
setActiveAnchor: (anchor: HTMLElement | null) => void
border?: CSSProperties['border']
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index f5d06e5a..289f1d1d 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -61,6 +61,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
setIsOpen,
afterShow,
afterHide,
+ disableTooltip,
role = 'tooltip',
}: ITooltipController,
ref,
@@ -370,6 +371,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
setIsOpen,
afterShow,
afterHide,
+ disableTooltip,
activeAnchor,
setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor),
role,
diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
index a6a5e289..a201ba1d 100644
--- a/src/components/TooltipController/TooltipControllerTypes.d.ts
+++ b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -94,6 +94,7 @@ export interface ITooltipController {
setIsOpen?: (value: boolean) => void
afterShow?: () => void
afterHide?: () => void
+ disableTooltip?: (anchorRef: HTMLElement | null) => boolean
role?: React.AriaRole
}
diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap
index face6e5c..9dc8d750 100644
--- a/src/test/__snapshots__/tooltip-props.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-props.spec.js.snap
@@ -100,6 +100,28 @@ exports[`tooltip props tooltip with delay show 1`] = `
</div>
`;
+exports[`tooltip props tooltip with disableTooltip return false 1`] = `
+<div>
+ <span
+ data-tooltip-id="example-disableTooltip-false"
+ >
+ Lorem Ipsum
+ </span>
+ <div
+ class="react-tooltip react-tooltip__place-top react-tooltip__show"
+ id="example-disableTooltip-false"
+ role="tooltip"
+ style="left: 5px; top: -10px;"
+ >
+ Hello World!
+ <div
+ class="react-tooltip-arrow"
+ style="left: -1px; bottom: -4px;"
+ />
+ </div>
+</div>
+`;
+
exports[`tooltip props tooltip with float 1`] = `
<div>
<span
diff --git a/src/test/tooltip-props.spec.js b/src/test/tooltip-props.spec.js
index f43e3543..a60a8773 100644
--- a/src/test/tooltip-props.spec.js
+++ b/src/test/tooltip-props.spec.js
@@ -181,4 +181,35 @@ describe('tooltip props', () => {
expect(tooltip).toBeInTheDocument()
expect(container).toMatchSnapshot()
})
+
+ test('tooltip with disableTooltip return true', async () => {
+ render(
+ <TooltipProps
+ id="example-disableTooltip-true"
+ content="Hello World!"
+ disableTooltip={() => true}
+ />,
+ )
+ const anchorElement = screen.getByText('Lorem Ipsum')
+ await userEvent.hover(anchorElement)
+
+ expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+ })
+
+ test('tooltip with disableTooltip return false', async () => {
+ const { container } = render(
+ <TooltipProps
+ id="example-disableTooltip-false"
+ content="Hello World!"
+ disableTooltip={() => false}
+ />,
+ )
+ const anchorElement = screen.getByText('Lorem Ipsum')
+ await userEvent.hover(anchorElement)
+
+ const tooltip = await screen.findByRole('tooltip')
+
+ expect(tooltip).toBeInTheDocument()
+ expect(container).toMatchSnapshot()
+ })
})