Skip to content
Home

Tooltip

Info
Demos
Properties

Demos

Button with hover Tooltip

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

Button with active Tooltip

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

NumberFormat with a tooltip

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

... or wrapped around the NumberFormat component:

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

Tooltip with delay

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

Tooltip linked to a vanilla button

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