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

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

... or wrapped around the NumberFormat component:

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

Tooltip with position animation

TopBottom
<Tooltip
animatePosition
group="animatePosition"
hideDelay={1e3}
targetElement={<Span role="text" right>Top</Span>}
>
Tooltip 1
</Tooltip>
<Tooltip
animatePosition
group="animatePosition"
position="bottom"
size="large"
targetElement={<Span role="text">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>