feat: support data-tooltip-class-name on anchor

ReactTooltip · Dec 4, 2023 · 1741761 · 1741761
1 parent 56a7ba1
commit 1741761
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 1 deletion.
diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
@@ -69,6 +69,7 @@ import { Tooltip } from 'react-tooltip';
 | data-tooltip-delay-hide        | number     | false     |             | any `number`                                                                                                                      | The delay (in ms) before hiding the tooltip                                                                                               |
 | data-tooltip-float             | boolean    | false     | `false`     | `true` `false`                                                                                                                    | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                            |
 | data-tooltip-hidden            | boolean    | false     | `false`     | `true` `false`                                                                                                                    | Tooltip will not be shown                                                                                                                 |
+| data-tooltip-class-name        | string     | false     |             |                                                                                                                                   | Classnames for the tooltip container                                                                                                   |
 
 ### Props
 

diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
@@ -37,6 +37,7 @@ export type DataAttribute =
   | 'delay-hide'
   | 'float'
   | 'hidden'
+  | 'class-name'
 
 /**
  * @description floating-ui middleware

diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
@@ -14,6 +14,7 @@ import type {
 import { useTooltip } from 'components/TooltipProvider'
 import { TooltipContent } from 'components/TooltipContent'
 import cssSupports from 'utils/css-supports'
+import classNames from 'classnames'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
@@ -75,6 +76,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
     const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
     const [tooltipEvents, setTooltipEvents] = useState(events)
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
+    const [tooltipClassName, setTooltipClassName] = useState<string | null>(null)
     const [activeAnchor, setActiveAnchor] = useState<HTMLElement | null>(null)
     const styleInjectionRef = useRef(disableStyleInjection)
     /**
@@ -135,6 +137,9 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
         hidden: (value) => {
           setTooltipHidden(value === null ? hidden : value === 'true')
         },
+        'class-name': (value) => {
+          setTooltipClassName(value)
+        },
       }
       // reset unset data attributes to default values
       // without this, data attributes from the last active anchor will still be used
@@ -321,7 +326,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       id,
       anchorId,
       anchorSelect,
-      className,
+      className: classNames(className, tooltipClassName),
       classNameArrow,
       content: renderedContent,
       contentWrapperRef,

diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -114,5 +114,6 @@ declare module 'react' {
     'data-tooltip-delay-hide'?: number
     'data-tooltip-float'?: boolean
     'data-tooltip-hidden'?: boolean
+    'data-tooltip-class-name'?: string
   }
 }
diff --git a/src/test/__snapshots__/tooltip-attributes.spec.js.snap b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
@@ -22,6 +22,29 @@ exports[`tooltip attributes basic tooltip 1`] = `
 </div>
 `;
 
+exports[`tooltip attributes tooltip with class name 1`] = `
+<div>
+  <span
+    data-tooltip-class-name="tooltip-class-name"
+    data-tooltip-content="Hello World!"
+    id="example-class-name-attr"
+  >
+    Lorem Ipsum
+  </span>
+  <div
+    class="react-tooltip tooltip-class-name react-tooltip__place-top react-tooltip__show"
+    role="tooltip"
+    style="left: 5px; top: -10px;"
+  >
+    Hello World!
+    <div
+      class="react-tooltip-arrow"
+      style="left: -1px; bottom: -4px;"
+    />
+  </div>
+</div>
+`;
+
 exports[`tooltip attributes tooltip with place 1`] = `
 <div>
   <span

diff --git a/src/test/tooltip-attributes.spec.js b/src/test/tooltip-attributes.spec.js
@@ -75,4 +75,28 @@ describe('tooltip attributes', () => {
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
+
+  test('tooltip with class name', async () => {
+    const { container } = render(
+      <TooltipAttrs
+        id="example-class-name-attr"
+        data-tooltip-content="Hello World!"
+        data-tooltip-class-name="tooltip-class-name"
+      />,
+    )
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    let tooltip = null
+
+    await waitFor(() => {
+      tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveClass('tooltip-class-name')
+    })
+
+    expect(anchorElement).toHaveAttribute('data-tooltip-class-name')
+    expect(tooltip).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
+  })
 })