Tooltip
Contextual help text that appears on hover or focus. Non-interactive, positioned relative to a trigger element.
Top tooltip
Options
Placement
Tooltip text
Top
Tooltip text
Bottom
Tip
Left
Tip
Right
Table of options
| Property | Values | Default |
|---|---|---|
| text | text | — |
| placement | top / bottom / left / right | top |
Behaviors
Appears on hover and focus
Show on hover and focus
Tooltips appear when the trigger is hovered or receives keyboard focus. They disappear when the pointer leaves or focus moves away.
Usage guidelines
Save changes
Do
Use tooltips to label icon-only buttons or provide brief supplementary info.
This is a very long tooltip that contains multiple sentences and detailed instructions that should really be in a help section instead.
Don't
Don't put long content in tooltips. Use a popover or inline help instead.
Accessibility
- Uses
role="tooltip"on the tooltip element. - Trigger should have
aria-describedbypointing to the tooltip ID for screen readers. - Tooltips are non-interactive — they cannot contain links or buttons.
- Shows on both hover and focus to support keyboard users.
Design checklist
All color themesWorks across light and dark modes.
Defined optionsPlacement and text documented.
Usage guidelinesDo/don't for content length.
Design tokensComponent-scoped tokens (
--tooltip-*).