UX writingExpert heuristicFoundational
Tooltips and Inline Help
Explain the thing that cannot be made obvious, and put the explanation where the decision happens.
Definition
Inline help covers tooltips, hint text, info icons and expandable explanations. Each one is an admission that something is not self-evident, which makes the first question whether the interface can be changed instead.
Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.
The same help, three ways
| Weak | Better | Best | Why the last one wins |
|---|---|---|---|
| More info | About sampling | Sampling: we estimate from 5% of events once a report exceeds 1M rows | Answers the question instead of announcing that an answer exists. |
| Required field | This field is required | Needed to issue your invoice | Gives the reason, which is what the reader actually wanted. |
| Learn more about permissions | How roles work | Editors can change content. Only owners can delete or invite. | Puts the comparison in the interface rather than in a help centre. |
Using them
Do
- Prefer persistent help text for anything needed to complete a task.
- Keep tooltips to a label or a short clarification.
- Make the trigger reachable by keyboard and the content dismissible without moving the pointer.
- Write the first six words so they stand alone, since that is all many people read.
Do not
- Do not hide required information behind hover. Touch has no hover, and neither does a keyboard.
- Do not put interactive content inside a tooltip. That is a popover, with different behaviour and different requirements.
- Do not use an info icon as a substitute for a clearer label.
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.
Principles behind this
The reasoning this solution is an application of.
- Help and DocumentationHeuristic
Related concept
Connected closely enough to change how you apply this.
- Content on Hover or FocusAccessibility
- PopoverComponent
- TooltipComponent
- Form Labels and Help TextUX writing
- MicrocopyUX writing