Tour
A product tour / onboarding walkthrough. Steps are configured as JSON (each with a CSS target); stimulus-zag positions a single reused content popover over each target in turn.
Parts
backdrop, spotlight, positioner, content, title, description, progress-text, arrow, arrow-tip, action-trigger, close-trigger. Action triggers carry data-action (next/prev/dismiss/skip).
Values
| Attribute | Type | Default | Description |
|---|---|---|---|
data-zag-tour-steps-value | Array | [] | Steps (JSON, each with a target). |
data-zag-tour-close-on-escape-value | Boolean | true | Close on Escape. |
data-zag-tour-close-on-interact-outside-value | Boolean | false | Close on outside click. |
data-zag-tour-prevent-interaction-value | Boolean | false | Block interaction with the page. |
Events
Emits zag-tour:status-change and :step-change. Start with the zag-tour:start event on the element, or the controller's start().
Programmatic control
open (getter), stepId (getter), start(id?), next(), prev().