Tour

Step-by-step feature onboarding with a fullscreen overlay and target highlighting.

Basic usage

Start the tour

Start tour

Highlighted area 1

Highlighted area 2

Example

Tour events

Step events

Start tourNot started

Highlighted area 1

Highlighted area 2

Example

Controlled step and visibility

Both open and current are controlled attributes: an external button / JS sets open to start the tour, and sets current to jump directly to a given step (no need to click through).

Controlled open / current

Start tour (set open)Jump to step 2 (current=1)Jump to step 3 (current=2)Finish (remove open)

Controlled highlight area 1

Controlled highlight area 2

Controlled highlight area 3

Example

API

Attributes

Attribute	Description	Type	Default
current	Current step index	string	0
open	Start the tour (boolean attribute; starts when present)	boolean	—
steps	Steps JSON	TourStep[] | string	[]

Events

Event	Description
oas-cancel	Skipped or cancelled via Esc
oas-finish	"Finish" was clicked on the last step
oas-step	The step changed, detail: { index }

The overlay highlights the target, role="dialog" + aria-modal="true"; supports "Previous / Next / Skip" and the Esc key.