From 962a660df5e585148282dd3536f76b94210995aa Mon Sep 17 00:00:00 2001 From: Naresh Pingale Date: Sun, 21 Jul 2024 22:09:03 +0530 Subject: [PATCH 1/4] feat: support for disabled tooltip callback --- src/components/Tooltip/Tooltip.tsx | 4 ++++ src/components/Tooltip/TooltipTypes.d.ts | 1 + src/components/TooltipController/TooltipController.tsx | 2 ++ src/components/TooltipController/TooltipControllerTypes.d.ts | 1 + 4 files changed, 8 insertions(+) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 37487927..3e70182e 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,6 +460,9 @@ const Tooltip = ({ const elementRefs = new Set(anchorRefs) anchorsBySelect.forEach((anchor) => { + if(disableTooltip?.(anchor)){ + return; + } elementRefs.add({ current: anchor }) }) 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 } From f9493de718d0d71cd815c7f7b0d22c651b63f6e5 Mon Sep 17 00:00:00 2001 From: Naresh Pingale Date: Tue, 23 Jul 2024 12:03:12 +0530 Subject: [PATCH 2/4] fix: code formating and disableTooltip check for anchorById --- src/components/Tooltip/Tooltip.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 3e70182e..1471e930 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -460,14 +460,14 @@ const Tooltip = ({ const elementRefs = new Set(anchorRefs) anchorsBySelect.forEach((anchor) => { - if(disableTooltip?.(anchor)){ - return; + if (disableTooltip?.(anchor)) { + return } elementRefs.add({ current: anchor }) }) const anchorById = document.querySelector(`[id='${anchorId}']`) - if (anchorById) { + if (anchorById && !disableTooltip?.(anchorById)) { elementRefs.add({ current: anchorById }) } From 30e23567a22464f74f0fd0ba9a91ca5daf6248ee Mon Sep 17 00:00:00 2001 From: Naresh Pingale Date: Tue, 23 Jul 2024 12:16:59 +0530 Subject: [PATCH 3/4] chore: adding disabledTooltip to options in docs --- docs/docs/options.mdx | 1 + 1 file changed, 1 insertion(+) 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 | From 263138af8413cf7cd8f819a0705fffd472fa8b1f Mon Sep 17 00:00:00 2001 From: Naresh Pingale Date: Tue, 23 Jul 2024 12:51:37 +0530 Subject: [PATCH 4/4] chore: adding tests for disableTooltip prop --- .../__snapshots__/tooltip-props.spec.js.snap | 22 +++++++++++++ src/test/tooltip-props.spec.js | 31 +++++++++++++++++++ 2 files changed, 53 insertions(+) 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() + }) })