Tour
A guided product tour that highlights elements with a spotlight overlay and step-by-step tooltip popups — great for onboarding and feature introductions.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Tour />
When to Use
- Feature walkthroughs introducing new or updated functionality
- Onboarding flows guiding first-time users through the interface
- Guided tutorials with step-by-step instructions anchored to UI elements
- Contextual help that highlights specific parts of the page
API Reference
Tour
| Property | Type | Default | Description |
|---|---|---|---|
| Steps | List<TourStepConfig> | [] | List of step definitions with target, title, description, and placement. |
| Open | bool | false | Whether the tour is active. Supports two-way binding (@bind-Open). |
| CurrentStep | int | 0 | Current step index (zero-based). Supports two-way binding. |
| OnComplete | EventCallback | — | Fired when the user reaches and completes the last step. |
| OnSkip | EventCallback | — | Fired when the user clicks Skip or dismisses the tour. |
| CurrentStepChanged | EventCallback<int> | — | Two-way binding callback for the current step index. |
| OpenChanged | EventCallback<bool> | — | Two-way binding callback for the tour open state. |
| IsOpen | bool | false | Alias for Open; kept for backwards compatibility with @bind-IsOpen. |
| IsOpenChanged | EventCallback<bool> | — | Alias for OpenChanged; kept for backwards compatibility with @bind-IsOpen. |
TourStepConfig
| Parameter | Type | Description |
|---|---|---|
| TargetSelector | string? | CSS selector for the element to highlight (e.g., "#my-button"). |
| Title | string | Tooltip heading. |
| Description | string? | Optional body text below the title. |
| Placement | Lumeo.Side | Where to place the tooltip: Top, Bottom, Left, Right. |