Skip to content
The Product Guys
All patterns
Onboarding5 min read

The Tooltip Tour

A sequence of overlaid callouts pointing at interface elements, and why it is usually a patch.

The problem it solves

A screen has grown past the point where it explains itself, and there is no budget to redesign it. A tour is bolted on to narrate the confusion.

Attention across tour steps

Step 1 shown100%Step 271% (-29%)Step 348% (-23%)Step 436% (-12%)Step 5 finished29% (-7%)
An illustrative five step tour. Most people who start it are gone by step three, so anything important placed after step two is effectively unsaid. The practical rule is to put the one thing that matters in step one.

Start with the uncomfortable part. A tooltip tour is almost always a symptom. Something on the screen failed to communicate, and instead of fixing the label, the layout or the default, the team added a layer of text on top that points at it. The tour ships in a week. The underlying screen stays broken for years.

That does not make tours useless. It makes them a last resort with a narrow brief. If you are going to build one, build it knowing what it is covering for.

The diagnostic question

For each step in your planned tour, ask: could this be solved by changing the thing the tooltip points at. A tooltip that says This is where your projects live can be replaced by a heading that says Projects. A tooltip that says Click here to invite your team can be replaced by a button that says Invite your team. Work through the list honestly and most tours shrink to one or two steps, which is the right size.

Tour as a patch

  • This is your workspace switcher.
  • Here you can see all your items.
  • Click the plus button to add something.
  • Use filters to narrow down results.
  • You can access settings from here.

Fix the screen instead

  • Show the workspace name in the switcher rather than an icon.
  • Name the list with a heading and an item count.
  • Label the button Add task instead of using a bare plus.
  • Show the filter bar with the active filter stated in words.
  • Nothing. Settings does not need a tour step.

What survives the diagnostic is worth a callout: a genuinely novel interaction with no convention behind it, a destructive control that needs a warning once, or a feature whose value is invisible from its affordance: A visual cue that tells you what an element will do if you act on it.. Three steps is a ceiling.

  1. 1Cut every step that could be a better label, a heading, a default or a layout change.
  2. 2Cap what remains at three steps, on one screen.
  3. 3Make every step dismissible with a visible close control and the Escape key.
  4. 4Let the user interact with the real interface during the tour rather than blocking it behind an overlay.
  5. 5Never show it twice, and never show it to users who arrived through an invite from an existing account.
If the interface needs a tour to be understood, the tour is documentation for a bug.
A reasonable design review

One more trap. Tours are easy to measure and the numbers flatter them, because the people who finish a five step tour are the motivated ones who would have figured it out anyway. Completion rate tells you about the users, not about the tour.

When it fits

  • A single genuinely novel interaction with no existing convention, such as a new canvas gesture.
  • A one time warning before a destructive or irreversible control.
  • A major layout change shown once to existing users who already know the old arrangement.
  • A short bridge while a real redesign is in flight, with a date to remove it.

When it backfires

  • When it narrates an interface that should have been relabelled, which hides the problem from the people who could fix it.
  • When it blocks the interface behind an overlay, so an eager user cannot start doing the thing being described.
  • When it runs longer than three steps, at which point people click Next to make it stop and retain nothing.
  • When completion rate becomes the success metric, since the users who finish tours were already going to activate.

Products using it

  • Figma

    New canvas interactions are introduced with a brief pointer near the relevant tool while the canvas stays fully usable.

  • Google Maps

    Interface changes have been announced with a single callout on the moved control rather than a multi step walkthrough.

  • GitHub

    Redesigned navigation has been introduced with one dismissible pointer at the changed element, not a tour of the page.

The psychology under it

The takeaway

Run every tour step through the question of whether a better label would do the job, and ship only what survives.

Finished the teardown? Bank it and the day counts toward your run.