Tooltip
A short description on hover or focus, which must never be the only place information lives.
Definition
A tooltip provides supplementary description for an element. It is descriptive, not interactive, and it is unavailable on touch devices, which limits what it can be responsible for.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Explaining an icon-only control.
- Providing a short clarification that is genuinely supplementary.
Common mistakes
- Essential information in tooltips.
- Hover-only triggering.
- Interactive content inside.
- Reliance on the title attribute.
Rules
- Never put essential information only in a tooltip.
- Show on focus as well as hover, so keyboard users get it.
- Do not put interactive content inside. That is a popover.
- Avoid the title attribute: its timing is uncontrollable, it is unstyled, and it is inconsistently announced.
- Keep to one short sentence. Longer content belongs somewhere persistent.
Keeping a tooltip within its job
Do
- Trigger on focus as well as hover, so keyboard users get it.
- Keep it dismissible with Escape and hoverable, as WCAG 1.4.13 requires.
- Keep it to one short sentence.
- Provide the same information somewhere persistent, because touch users may never see it.
Do not
- Put a link, a button or an input inside one. That is a popover.
- Use the title attribute, whose timing, styling and announcement are all out of your control.
- Attach one to a control whose label it is really replacing.
- Let it vanish the moment the pointer moves, which makes it unusable under magnification.
In practice
- i.
Essential information, hidden on hover
The usual misuseA form field whose format requirement lived only in a tooltip failed for every touch user and every keyboard user who did not think to tab into the icon. The requirement belonged under the field.
- ii.
The icon that needed the tooltip to mean anything
A label problem in disguiseWhen the tooltip is the only thing that explains the control, the control has no label. The fix is a visible label, after which the tooltip usually turns out to be unnecessary.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Popover
ComponentA dismissible panel anchored to a trigger, holding richer content and its own controls.
Key difference
A tooltip labels something already on screen and disappears when you look away. A popover is a small surface of its own: it holds content, can take focus, and stays until dismissed.
Use Tooltip when
- The content is one line and adds nothing the reader must act on.
- Nothing inside needs to be clicked, copied or tabbed to.
- The element already has a visible label and needs only amplifying.
Use Popover when
- The content includes links, inputs or buttons.
- The reader needs it to stay open while they read or act.
- It is long enough that losing it on mouse-out would be a loss.
Local chart
CMP·013 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Help and DocumentationHEUR·010 · Heuristic
- DiscoverabilityPRIN·005 · Principle
- IconographyFND·050 · UI foundation
Depends on
Get these right first, or this one will not hold.
- Content on Hover or FocusA11Y·018 · Accessibility
Hover content has dismissible, hoverable and persistent requirements that most tooltips fail.
- Keyboard NavigationA11Y·002 · Accessibility
Related concept
Connected closely enough to change how you apply this.
- Tooltips and Inline HelpWRT·015 · UX writing