Role and semantics
Section titled “Role and semantics”Tooltip renders a popup beside the trigger through Base UI Tooltip. While open, the popup is linked to the trigger with aria-describedby; a screen reader reads the hint after the name. The popup itself takes no focus.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | When the trigger takes focus, the tooltip opens at once. |
| Escape | Closes the tooltip; focus stays on the trigger. |
Focus always stays on the trigger. The tooltip has no focusable content.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Button | “Save, button”, then “Saves the changes and closes the window.” |
| IconButton | “Copy, button”; the name is not read twice |
Contrast
Section titled “Contrast”color-text-inverse text has at least 4.5:1 contrast on color-surface-inverse.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Tooltip meets it | What the product team does |
|---|---|---|
| 1.4.13 Content on hover or focus | Escape closes it, the pointer can move onto it, and it stays while hover or focus remains. | Do not close the tooltip on a timer. |
| 2.1.1 Keyboard | Opens on keyboard focus. | Give tooltips only to focusable elements. |
| 2.5.3 Label in name | On an IconButton the tooltip and the name are the same. | Keep the tooltip text and the name the same. |
| 4.1.2 Name, role, value | aria-describedby while open. |
Do not put essential information only in a tooltip. |