UI components · UX polish
Tour
Also called: Product tour, Onboarding tour, Coach marks, Walkthrough
A step-by-step walkthrough of the interface for first-time users. It dims the rest of the page, lights up one button or area, and a bubble next to it explains what it does. Click "Next" to continue.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstWhen a user opens the project list page for the first time, start a 3-step tour with driver.js. Each step covers the page with a 50% dark overlay and reveals only the target element, with 6px of padding around it and an 8px rounded spotlight. Step 1 points at the "New project" button in the top right. The bubble sits below the button, 280px wide, titled "Start a new project here," with the text "A project holds your pages, assets, and teammates. Try creating one." Step 2 points at "Templates" on the left, and step 3 at the search box. At the bottom left of the bubble, show "1 / 3" and three progress dots; at the bottom right, a "Skip" text button and a "Next" primary button, which becomes "Get started" on the last step. Esc or "Skip" ends the tour. When it ends, save that in localStorage so it doesn't open again, and add "Replay the tour" to the help menu.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Tour is what you need.
Use Tour when
- First-time users of a feature-rich product who need to know where a few key entry points are
- A new feature launched or the layout changed, and existing users need to know where things went
- Complex editors and admin tools where the core actions are hard to find without a guide
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A big window pops up as soon as the page loads, stuffed with a dozen feature explanations, pointing at nothing in particular, and it can't be skipped
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
A tour with a dozen steps where every step only has "Next," with no skip or close
- 03
It pops up again every time the page opens, without remembering that the user has seen it
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
An overlay, a highlighted target element, and a step bubble pointing at it. The bubble has a title, a description, step progress (1 / 3 or dots), and "Skip," "Back," and "Next / Done" buttons.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A tour shows up when users first open the product or when a new feature ships. Each step covers the rest of the page with a semi-transparent overlay and reveals only the button or area being introduced (the spotlight). A Popover with an arrow pops up next to it: a title, a sentence or two, progress like "2 / 4," and "Skip," "Back," and "Next." On the last step the button becomes "Done" or "Get started." A lighter version skips the overlay and just puts a pulsing dot (a hotspot) next to the new feature, which shows the explanation when clicked.
How it differs from a Tooltip or Popover: those appear when the user hovers or clicks, one at a time. A tour is started by the product, chains several steps in order, and covers the page and limits what you can do. It's also different from Steps. Steps show progress through a task the user is completing, while a tour only introduces the interface and produces no data. A welcome Modal can serve as step 0, but don't cram every explanation into one big pop-up.
Keep it to 3 to 5 steps. Each step covers one thing, points at one real interface element, and uses a sentence or two. Every step should be skippable and closable. Remember when someone closes it so it doesn't pop up every visit, and add a "Replay the tour" link in the help menu. Keep the target in view (scroll to it if needed) and reposition when the window resizes. On phones, keep the bubble clear of the keyboard and screen edges.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-tour- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-tour.el-tour[class*="t-guide__"].driver-popover.introjs-tooltip.introjs-helperLayer.shepherd-element.react-joyride__tooltip.reactour__popover.v-tour.v-step
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
product-tourtour-steptour-popovertour-maskonboarding-tourcoachmarkcoach-markwalkthroughguide-masknewbie-guide
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
TourProductTourTourStepOnboardingTourJoyrideWalkthroughCoachmark
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
overlay
- Priority
- 3 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026