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 page
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.
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 DocumentationHeuristic
- DiscoverabilityPrinciple
- IconographyUI foundation
Depends on
Get these right first, or this one will not hold.
- Content on Hover or FocusAccessibility
Hover content has dismissible, hoverable and persistent requirements that most tooltips fail.
- Keyboard NavigationAccessibility
Commonly confused with
Close enough to be mixed up, different enough to matter.
- PopoverComponent
A tooltip labels. A popover contains interactive content and takes focus.
Related concept
Connected closely enough to change how you apply this.
- Tooltips and Inline HelpUX writing