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(`[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( setIsOpen, afterShow, afterHide, + disableTooltip, role = 'tooltip', }: ITooltipController, ref, @@ -370,6 +371,7 @@ const TooltipController = React.forwardRef( 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`] = ` `; +exports[`tooltip props tooltip with disableTooltip return false 1`] = ` +
+ + Lorem Ipsum + + +`; + exports[`tooltip props tooltip with float 1`] = `
{ expect(tooltip).toBeInTheDocument() expect(container).toMatchSnapshot() }) + + test('tooltip with disableTooltip return true', async () => { + render( + 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( + false} + />, + ) + const anchorElement = screen.getByText('Lorem Ipsum') + await userEvent.hover(anchorElement) + + const tooltip = await screen.findByRole('tooltip') + + expect(tooltip).toBeInTheDocument() + expect(container).toMatchSnapshot() + }) })