Skip to content

Commit

Permalink
feat: support data-tooltip-class-name on anchor
Browse files Browse the repository at this point in the history
  • Loading branch information
fatton139 authored and gabrieljablonski committed Dec 4, 2023
1 parent 56a7ba1 commit 1741761
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 1 deletion.
1 change: 1 addition & 0 deletions docs/docs/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions src/components/Tooltip/TooltipTypes.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export type DataAttribute =
| 'delay-hide'
| 'float'
| 'hidden'
| 'class-name'

/**
* @description floating-ui middleware
Expand Down
7 changes: 6 additions & 1 deletion src/components/TooltipController/TooltipController.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down Expand Up @@ -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)
/**
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -321,7 +326,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
id,
anchorId,
anchorSelect,
className,
className: classNames(className, tooltipClassName),
classNameArrow,
content: renderedContent,
contentWrapperRef,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
23 changes: 23 additions & 0 deletions src/test/__snapshots__/tooltip-attributes.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 24 additions & 0 deletions src/test/tooltip-attributes.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})

0 comments on commit 1741761

Please sign in to comment.