Skip to content
Home

Tooltip

Info
Demos
Properties

Demos

Button with hover Tooltip

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

Button with open Tooltip

<Button tooltip={<Tooltip open>Basic Tooltip</Tooltip>} text="Open" />

NumberFormat with a tooltip

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

... or wrapped around the NumberFormat component:

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

Tooltip with delay

<Tooltip
  hideDelay={1e3}
  size="large"
  targetElement={<Span right>Top</Span>}
>
  Tooltip 1
</Tooltip>
<Tooltip placement="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" open targetSelector=".target-1">
  Tooltip linked
</Tooltip>