interaction design
Tooltips
When do tooltips help, and when do they fail?
A tooltip is a small label that appears on hover or focus to explain a control - most often a bare icon whose meaning isn't obvious. Used well it's a quiet safety net for recognition; used as a crutch it hides essential information behind an interaction many people can't or won't perform.
Also known as: tooltip, tooltips, hint text
Prefer to watch?
Watch the recap 0:46
The demo
A toolbar of bare icons. With the tooltips off, try to tell what each one does; turn them on, then hover or tab to a button - and notice you had to go looking.
What this demo shows (text version)
A toolbar holds five icon-only buttons (save, share, duplicate, print, more). With tooltips off, nothing names them, so you're left guessing from the icons alone. With tooltips on, hovering a button - or moving to it with the keyboard - shows a small label describing it, associated with the button via aria-describedby so screen readers announce it too.
The catch the demo makes you feel: the label only appears once you hover or focus, so you had to go looking for it. On a touchscreen, where there's no hover, it might never appear. That's why a tooltip can reassure you about a reasonable icon but must never be the only place a control's meaning lives - anything essential belongs in a visible label.
A tooltip is a supplement, never the only place a control's meaning lives. It's fine as backup for an already-reasonable icon, but if a button is incomprehensible without its tooltip, add a visible label instead - because tooltips don't exist on touch, need deliberate hover or focus, and shouldn't carry anything essential. Trigger on hover and focus, describe with aria, and keep them brief.
Without the tooltips the icons were a guessing game - you hovered hoping to find the right one. With them, a hover or a focus named each one, and the doubt cleared. But notice: you had to go looking. On a phone, with no hover, that label would never have appeared at all - which is why a tooltip can support an icon but never carry it.
A tooltip's honest job is reassurance, not revelation. For a control that's already fairly guessable, a tooltip confirms "yes, that's the one" without cluttering the layout - a small recognition aid. The trouble starts when the interface relies on it to make an otherwise-meaningless icon understandable.
Tooltips fail exactly where people need them most. They require hover or keyboard focus, so on touchscreens they often don't appear at all; they hide on the next move, so they're useless for anything you must read while acting; and they're easy to miss entirely. Anything essential to using a control belongs in a visible label, not a tooltip.
If you use them, make them accessible: trigger on focus as well as hover so keyboard users get them, associate them with the control via aria-describedby so screen readers announce them, keep them short, and never put interactive elements inside. A tooltip is a whispered hint - fine as backup, dangerous as the only voice.