A hover/focus-triggered label for an element that doesn't have visible text of its own (an icon
button, say). Purely informational — nothing inside a Tooltip can be interacted with, so
content is plain text, not arbitrary content; anything needing real interaction belongs in a
Popover.
tsx
<Tooltip content="Save your work">
...
</Tooltip>content
Examples
Wrapping an icon-only IconButton is the case Tooltip earns its keep on — the button already has
an aria-label for screen readers, and the tooltip adds the same information visually for
sighted mouse/keyboard users:
tsx
<Tooltip content="Delete">
<IconButton icon="trash" aria-label="Delete" />
</Tooltip>delay (ms) holds off showing it on hover — useful so a tooltip doesn't flash in for every icon a
cursor merely passes over on its way somewhere else:
tsx
<Tooltip content="Settings" delay={400}>
<IconButton icon="settings" aria-label="Settings" />
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | readonly | — | A single focusable element — a Tooltip needs one thing to attach hover/focus to. |
| content * | text | — | — |
| delay | number | 300 | Hover delay before showing, in ms. Closes immediately. |
| placement | top | right | bottom | left | top-start | top-end | right-start | right-end | bottom-start | bottom-end | left-start | left-end | top | — |