Tours
Steps and selectors
Write reliable CSS selectors and step options that survive theme markup.
Each step highlights an element with a CSS selector and shows a Driver.js popover.
Selector tips
- Prefer stable IDs:
#site-header,#primary - Prefer semantic classes your theme owns:
.main-navigation - Attribute selectors work:
[data-tour="checkout"] - Nested selectors are fine:
.hero .cta-button - Angle brackets and quotes are stripped for safety — keep selectors plain CSS
You do not need to edit the theme if the markup already exposes classes or IDs.
Step options
| Option | Notes |
|---|---|
side | top, right, bottom, left, over |
align | start, center, end |
requireClick | Visitor must click the highlighted element to continue |
disableActiveInteraction | Block interacting with the highlighted element |
missingBehavior | skip (default) or popover if the element is absent |
| Label overrides | Optional next / prev / done button labels |
Missing elements
Themes and builders often hide widgets on mobile. Prefer skip for optional chrome, or popover for critical messaging that should still appear.
Events
While a tour runs, the loader dispatches DOM events you can listen for:
lcpt:startlcpt:steplcpt:completelcpt:cancel
document.addEventListener('lcpt:complete', (e) => {
console.log('Tour finished', e.detail);
});