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 |
| show-delay | milliseconds, zero or greater | 300 |
| hide-delay | milliseconds, zero or greater | 0 |
Behaviors
Appears on hover and focus
Show on hover and focus
Tooltips appear after the configured show delay (300 ms by default) when the trigger is hovered or receives keyboard focus. They disappear after the configured hide delay 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. - The Web Component generates or accepts a stable tooltip ID and applies it to the trigger through
aria-describedby. - Static/Nunjucks usage should provide a tooltip ID and the matching
aria-describedbyvalue on the trigger. - Tooltips are non-interactive — they cannot contain links or buttons.
- Shows on both hover and focus to support keyboard users.
- The directional pointer is presentational and inherits the tooltip surface color.
Design checklist
All brand/mode contextsWorks across light and dark modes.
Defined optionsPlacement, text, show delay, and hide delay documented.
Usage guidelinesDo/don't for content length.
Design tokensComponent-scoped tokens (
--uif-tooltip-*).