Skip to content
UX Atlas
Plate WRT·015 · UX writingGrid F2 · Rev. 2026-09-12

Tooltips and Inline Help

Explain the thing that cannot be made obvious, and put the explanation where the decision happens.

UX writingExpert heuristicFoundational

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.

On this plate
  1. 1Definition
  2. 2The same help, three ways
  3. 3Using them
  4. 4Deciding where the help goes
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • A field or control depends on a concept the reader may not hold.
  • Support answers the same clarifying question repeatedly.

Common mistakes

  • Essential information available only on hover.
  • Tooltips that vanish before they can be read or reached.
  • Help text that restates the label.
  • Treating an info icon as a finished answer to a comprehension problem rather than as a note to fix the label.

The same help, three ways

WeakBetterBestWhy the last one wins
More infoAbout samplingSampling: we estimate from 5% of events once a report exceeds 1M rowsAnswers the question instead of announcing that an answer exists.
Required fieldThis field is requiredNeeded to issue your invoiceGives the reason, which is what the reader actually wanted.
Learn more about permissionsHow roles workEditors 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.

Deciding where the help goes

Do

  • Fix the label first. Most tooltips exist because a label is wrong.
  • Put anything required to complete the task in the flow, visible.
  • Keep the tooltip to one sentence of genuinely supplementary detail.
  • Make it reachable by keyboard and dismissible, per WCAG 1.4.13.

Do not

  • Put format requirements, pricing or legal detail in a tooltip.
  • Attach a tooltip to explain a control that could have been renamed.
  • Use an info icon as a substitute for the sentence itself.
  • Assume touch users will find it.

In practice

  1. i.

    The info icon that replaced a rewrite

    A smell, not a sin

    An icon beside a field labelled Reference was explaining what the field wanted. Renaming it Invoice number removed the icon, the tooltip and the support question in one change.

Local chart

WRT·015 · Region III · Grid F2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Help and DocumentationHEUR·010 · PRINCIPLES BEHIND THISContent on Hover or FocusA11Y·018 · RELATED CONCEPTPopoverCMP·012 · RELATED CONCEPTTooltipCMP·013 · RELATED CONCEPTForm Labels and Help TextWRT·009 · RELATED CONCEPTMicrocopyWRT·001 · RELATED CONCEPT

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.

Related concept

Connected closely enough to change how you apply this.