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
Step 1 / 3 · idle
Bind CurrentStep to drive the tour from your own Prev/Next controls, and use OnComplete / OnSkip to record how the tour ended.
API Reference
Tour
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. |