feat: support for disabled tooltip callback

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                                                                                                                               |

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 })
     }
 

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']

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,

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
 }
 

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

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()
+  })
 })