Tooltip
Also called hint, hover text, title tip, infotip
A small text-only label that appears on hover or keyboard focus and describes the element it is attached to.
Example
Hover a button — or Tab to it, which matters just as much. Each tooltip names the icon and shows its shortcut.
Note what is not here: nothing inside a tooltip is clickable. The shortcut is text, not a button — the pointer can never reach inside one.
When to use it
- Naming an icon-only button. This is the tooltip's core job and it does it better than anything else.
- Expanding an abbreviation or a piece of jargon the interface cannot spell out in full.
- Showing the complete value of text that had to be truncated.
- Adding a detail that is genuinely optional — the interface must still make sense to someone who never sees it.
When not to
- The content is the only place that information exists. Tooltips are invisible on touch devices and to anyone who does not hover.
- There is anything interactive inside — a link, a button, a copy action. A tooltip cannot be reached to click.
- It is more than a short sentence. Long tooltips get cut off by the viewport and are exhausting to read while holding a hover.
- Something has gone wrong. Errors belong in the layout, not in a layer that disappears when the mouse moves.
- Attaching one to a plain block of text. Nobody hovers over paragraphs, so it will simply never be discovered.
Trade-offs
- Costs no layout space, so dense toolbars stay dense.
- Appears exactly where the user is already pointing.
- Trivial to add to any icon button and instantly understood.
- Effectively does not exist on touch devices.
- Undiscoverable — the user has to already be pointing at the thing to learn what it is.
- The open delay is a genuine design decision: too short and it flickers as the mouse crosses a toolbar, too long and it feels broken.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- Must appear on keyboard focus, not just mouse hover. A tooltip that only responds to hover excludes keyboard users entirely.
- Escape must dismiss it while the trigger keeps focus.
- Nothing inside can be focusable. If the content needs the keyboard, it is a popover.
- Roles and state
- Use `role="tooltip"` on the bubble and connect it with `aria-describedby` on the trigger.
- For an icon-only button, the tooltip text usually *is* the accessible name — use `aria-label` on the button rather than relying on the tooltip alone.
- Never place a tooltip on an element that is not focusable; screen reader and keyboard users will never reach it.
- Focus
- Focus stays on the trigger throughout — the tooltip never receives it. This is the structural difference from a popover, and the reason interactive content inside one is unreachable.
In the wild
- Figma — Every tool in the toolbar has one, complete with its keyboard shortcut — the canonical use of the pattern.
- GitHub — Truncated branch and file names reveal their full value on hover.
Compared with
Side-by-side breakdowns of patterns that solve a similar problem.