Tooltip

Organism

Short hint shown on hover and focus. Accessible via role="tooltip" + aria-describedby. Supports 4 placements, 3 themes, optional arrow, and configurable delay.

Props EditorInteractive

Content

Placement

Theme

Arrow

<Tooltip content="Helpful tooltip text">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Preview

Code

<Tooltip content="Help text" placement="top">
  <Button variant="outline" size="sm">Hover me</Button>
</Tooltip>

Preview

Code

<Tooltip content="Dark theme" theme="dark"><Button>Dark</Button></Tooltip>

Preview

Code

<Tooltip content="With arrow" arrow placement="top">
  <Button>Arrow</Button>
</Tooltip>
<Tooltip content="500ms delay" delay={500}>
  <Button>Delayed</Button>
</Tooltip>

Tooltip

Placements

Themes

Arrow + Delay