fix: false positive content prevention and better typing for it

Author: danielbarion

src/components/Tooltip/Tooltip.tsx

@@ -933,6 +933,7 @@ const Tooltip = ({
   }, [delayShow, handleShowTooltipDelayed])
 
   const actualContent = imperativeOptions?.content ?? content
+  const hasContent = actualContent !== null && actualContent !== undefined
   const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0
 
   useImperativeHandle(forwardRef, () => ({
@@ -964,7 +965,7 @@ const Tooltip = ({
     },
     activeAnchor,
     place: computedPosition.place,
-    isOpen: Boolean(rendered && !hidden && actualContent && canShow),
+    isOpen: Boolean(rendered && !hidden && hasContent && canShow),
   }))
 
   useEffect(() => {
@@ -976,7 +977,7 @@ const Tooltip = ({
     }
   }, [])
 
-  return rendered && !hidden && actualContent ? (
+  return rendered && !hidden && hasContent ? (
     <WrapperElement
       id={id}
       role={role}

src/components/TooltipController/TooltipController.tsx

@@ -275,7 +275,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
           {rendered}
         </div>
       ) : null
-    } else if (tooltipContent) {
+    } else if (tooltipContent !== null && tooltipContent !== undefined) {
       renderedContent = tooltipContent
     }
 

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -15,8 +15,8 @@ import type {
 export interface ITooltipController {
   className?: string
   classNameArrow?: string
-  content?: string
-  render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ReactNode
+  content?: ReactNode
+  render?: (render: { content: ReactNode | null; activeAnchor: HTMLElement | null }) => ReactNode
   place?: PlacesType
   offset?: number
   id?: string

src/test/tooltip-imperative.spec.js

@@ -146,4 +146,33 @@ describe('tooltip imperative API', () => {
       expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
     })
   })
+
+  test('imperative ref reports open for numeric zero content', async () => {
+    let tooltipRefInstance = null
+
+    const TestComponent = () => {
+      const tooltipRef = useRef(null)
+      tooltipRefInstance = tooltipRef
+
+      return (
+        <>
+          <button onClick={() => tooltipRef.current?.open()}>Open Zero</button>
+          <span data-tooltip-id="imperative-zero">Target</span>
+          <Tooltip id="imperative-zero" content={0} ref={tooltipRef} />
+        </>
+      )
+    }
+
+    render(<TestComponent />)
+
+    await userEvent.click(screen.getByText('Open Zero'))
+
+    const tooltip = await screen.findByRole('tooltip')
+
+    expect(tooltip).toBeInTheDocument()
+    expect(tooltip).toHaveTextContent('0')
+    await waitFor(() => {
+      expect(tooltipRefInstance.current?.isOpen).toBe(true)
+    })
+  })
 })

src/test/tooltip-props.spec.js

@@ -199,4 +199,16 @@ describe('tooltip props', () => {
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
+
+  test('tooltip renders numeric zero content', async () => {
+    render(<TooltipProps id="example-zero-content" content={0} />)
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    const tooltip = await screen.findByRole('tooltip')
+
+    expect(tooltip).toBeInTheDocument()
+    expect(tooltip).toHaveTextContent('0')
+  })
 })