Tour Step
ProA spotlight overlay with an attached tooltip for guiding users through an onboarding or feature tour. Highlights a target element by dimming the rest of the page with a backdrop cutout, and displays a tooltip with a title, description, step progress indicator, and navigation controls (Back, Next, Skip). Used for first-run experiences, feature announcements, and interactive walkthroughs.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard tour step with spotlight, content popover, and step navigation. | Use for feature introductions and guided onboarding flows. |
| With Image | ||
| Compact |
Usage Guidelines
Provide a "Skip tour" option on every step — never force completion.
Create tours longer than 5-7 steps — users lose interest beyond that.
Show a progress indicator — "Step 2 of 5" — so users know the tour length.
Block the user from interacting with the highlighted element.
Keep each step concise — one concept per step, 2-3 sentences maximum.
Auto-advance steps without user action — let users control the pace.
Position the tooltip so it does not obscure the highlighted element.
Show the tour on every visit — offer a "Don't show again" option.
Code
Design Tokens
Accessibility
- Each step uses role="dialog" with aria-label for screen reader context.
- Announce the step indicator to screen readers — "Step 2 of 5".
- Provide a "Skip tour" button that is always accessible via keyboard.
- Focus should move to the tour step popover when it appears.
- On tour completion or skip, return focus to the last highlighted element.