diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 3dd7bc80..22b281d6 100644 --- 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 index d5158cbb..0fb2879f 100644 --- 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 index 903fc01c..12448464 100644 --- 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( @@ -75,6 +76,7 @@ const TooltipController = React.forwardRef( const [tooltipWrapper, setTooltipWrapper] = useState(wrapper) const [tooltipEvents, setTooltipEvents] = useState(events) const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy) + const [tooltipClassName, setTooltipClassName] = useState(null) const [activeAnchor, setActiveAnchor] = useState(null) const styleInjectionRef = useRef(disableStyleInjection) /** @@ -135,6 +137,9 @@ const TooltipController = React.forwardRef( 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( 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 index b97e9c07..8211aa80 100644 --- 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 index c581b4df..15d58fd8 100644 --- 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`] = ` `; +exports[`tooltip attributes tooltip with class name 1`] = ` +
+ + Lorem Ipsum + + +`; + exports[`tooltip attributes tooltip with place 1`] = `
{ expect(tooltip).toBeInTheDocument() expect(container).toMatchSnapshot() }) + + test('tooltip with class name', async () => { + const { container } = render( + , + ) + 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() + }) })