Use cases
- Icon-only buttons — label the action for keyboard and screen-reader users.
- Truncated text — reveal the full string on hover.
- Supplementary info — explain a control without adding visual clutter.
- Keyboard shortcuts — display the shortcut alongside the action label.
When NOT to use
- Interactive content (links, buttons, inputs inside the float) — use Popover.
- Critical information the user must see without hovering — use Alert or inline text.
- Long descriptions — keep tooltip text under 80 characters. For more, use a HoverCard.
Sides
| Side | Use when |
|---|---|
top | Default. Works for most inline triggers. |
bottom | Trigger sits near the top edge of the viewport. |
left | Trigger is flush-right (e.g. toolbar end). |
right | Trigger is flush-left (e.g. sidebar icons). |
Composition
- Wrap a single focusable child. The tooltip binds
onMouseEnter/onFocusto that child automatically. delayMscontrols the hover delay (default 700 ms). Set0for toolbar-dense UIs where instant feedback matters.contentaccepts styled React content. UsecontentClassNamefor tokenized width, spacing, and typography classes.- Use
interactiveonly when the content must receive pointer events; otherwise keep tooltips passive and prefer Popover for controls. - On touch devices (React Native), the tooltip triggers on long-press — no hover available.