Tooltip
ProA small, non-interactive overlay that provides supplementary text when the user hovers over or focuses on a trigger element. Tooltips appear after a short delay (200ms) and disappear when the pointer leaves or focus moves away. They are positioned automatically to stay within the viewport. Used for icon button labels, truncated text expansion, and brief contextual help. Tooltips must never contain interactive content — use a Popover for that.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Top | ||
| Bottom | ||
| Left | ||
| Right |
Usage Guidelines
Use aria-describedby on the trigger element pointing to the tooltip id.
Place interactive content (links, buttons) inside a tooltip — use a Popover.
Set role="tooltip" on the tooltip element itself.
Use tooltips to display essential information — if the user needs it to complete a task, make it visible.
Show on both hover and keyboard focus for equal access.
Show tooltips on disabled elements without also providing an explanation elsewhere.
Keep tooltip text to a single short sentence or phrase.
Add a 200ms hover delay to prevent tooltips from flashing during mouse movement.
Code
Design Tokens
Accessibility
- Trigger element must have aria-describedby pointing to the tooltip id.
- Tooltip element must have role="tooltip" for correct semantics.
- Tooltip must appear on keyboard focus (not just hover) to comply with WCAG 1.4.13.
- Users must be able to dismiss the tooltip with the Escape key without moving focus.
- Tooltip content must not duplicate the trigger's accessible name — use it for supplementary detail only.
- Never place interactive elements inside a tooltip.