Skip to content
Home

Tooltip

Info
Demos
Properties

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>