Steps
Configure individual tour steps
What is a Step?
A step is an individual highlight in your tour. Each step targets a specific element on your page and displays a tooltip with information about that element.
Step Properties
| Property | Type | Description |
|---|---|---|
| Title | string | Heading displayed in the tooltip |
| Content | string | Description or instructions |
| Target Selector | string | CSS selector for the target element |
| Position | top | bottom | left | right | Where the tooltip appears relative to the element |
CSS Selectors
CSS selectors are used to target specific elements on your page. Here are common patterns:
#signup-btnID
Targets element with ID 'signup-btn'
.nav-menuClass
Targets elements with class 'nav-menu'
[data-tour='welcome']Attribute
Targets elements with specific data attribute
button.primaryCombined
Targets button elements with class 'primary'
Best Practices
✓
Use ID selectors when possible
IDs are unique and provide the most reliable targeting.
✓
Keep content concise
Each step should focus on one action or concept.
Avoid overly complex selectors
Complex selectors may break if your page structure changes.