Tooltip

A short hint for a control, shown on hover and keyboard focus. A light box with dark text and a small pointer, so it stands out against the dark panels.

CSS: css/components/tooltip.css
JS: js/components/tooltip.js

01 — Examples

Icon buttons

Hover a button, or tab to it. The bubble opens below and flips above when there’s no room. Esc hides it.

On text

For a shortened value, the tooltip can carry the full text. Keep the trigger focusable.

02 — Usage

Use it for

Naming an icon button’s action.
Showing the full text of a shortened value.
A keyboard shortcut next to an action.

Avoid

Anything important. Touch screens have no hover, so it may never be seen.
Links, buttons or anything else to click inside it.
More than a few words. Put longer help in the page.

03 — Accessibility

Notes

The bubble is linked with aria-describedby, so screen readers read it with the control even while it’s hidden.
It opens on keyboard focus as well as hover, stays open while the pointer is over it, and Esc closes it (WCAG 1.4.13). In a dialog, the first Esc closes the tooltip and the next closes the dialog.
It’s a hint, not a label: an icon button still needs aria-label.
Dark text on the light box is 16.12:1.