Skip to content

Tooltip

Demos

Button with hover Tooltip

<Button tooltip="Tooltip" text="Hover" />

Button with active Tooltip

<Button tooltip={<Tooltip active>Tooltip</Tooltip>} text="Active" />

NumberFormat with a tooltip

<NumberFormat tooltip="Tooltip">1234</NumberFormat>

... or wrapped around the NumberFormat component:

<Tooltip targetElement={<NumberFormat>1234</NumberFormat>}>
Tooltip
</Tooltip>

Tooltip with position animation

<Tooltip
animatePosition
group="animatePosition"
hideDelay={1e3}
size="large"
targetElement={<Span right>Top</Span>}
>
Tooltip 1
</Tooltip>
<Tooltip
animatePosition
group="animatePosition"
position="bottom"
targetElement={<Span>Bottom</Span>}
>
Tooltip 2
</Tooltip>

Tooltip linked to a vanilla button

<button className="target-1">Show the Tooltip</button>
<Tooltip id="unique" active targetSelector=".target-1">
Tooltip
</Tooltip>