# Tour

Source: https://lumeo.nativ.sh/components/tour

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic Tour

Dashboard Team Settings

Start Tour

Preview Code

Custom Placements

Top tooltip Right tooltip Bottom tooltip Left tooltip

Tour Placements

## 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.

## Related Components

-   [Tooltip](/components/tooltip) — On-hover hints for individual elements without a guided flow
-   [Popover](/components/popover) — Rich content anchored to an element, triggered by click
-   [Steps](/components/steps) — Visual step tracker for multi-step workflows