Tooltip

A floating label that appears on hover.

Basic

Wrap any element with Tooltip and pass content to show a label on hover. The tooltip appears after a short delay (300ms by default).

<Tooltip content="This is a tooltip">
<Button variant="outline" size="sm">Hover me</Button>
</Tooltip>

Sides

Use the side prop to control which side the tooltip appears on.

<Tooltip content="Top tooltip" side="top">
<Button variant="outline" size="sm">Top</Button>
</Tooltip>

<Tooltip content="Bottom tooltip" side="bottom">
<Button variant="outline" size="sm">Bottom</Button>
</Tooltip>

<Tooltip content="Left tooltip" side="left">
<Button variant="outline" size="sm">Left</Button>
</Tooltip>

<Tooltip content="Right tooltip" side="right">
<Button variant="outline" size="sm">Right</Button>
</Tooltip>

Custom delay

Set delay in milliseconds to control how long the user must hover before the tooltip appears. Set to 0 for instant display.

{/* Appears instantly */}
<Tooltip content="Instant" delay={0}>
<Button>Hover</Button>
</Tooltip>

{/* Appears after 1 second */}
<Tooltip content="Slow" delay={1000}>
<Button>Hover</Button>
</Tooltip>

Props

Prop	Type	Default	Description
`content`	`ReactNode`	—	Text or element shown inside the tooltip bubble
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Which side of the trigger the tooltip appears on
`delay`	`number`	`300`	Hover delay in milliseconds before the tooltip shows
`children`	`ReactNode`	—	The trigger element