Overview
A step is one stop on a walkthrough. It carries three things: the target it points at (tooltips only), the message it shows, and the rules for when it appears and how it looks. You configure a step across two tabs in the property panel — Content and Appearance.
Content Tab
Tooltip or Modal
Every step is one of two display types:
| Type | What it is | When to use |
| Tooltip | Anchored to a target on the page, positioning itself around it. Spotlights the target element through the dimmed backdrop. | To point at a specific control, field, or button. |
| Modal | A free-floating card with no target, centered by default on the screen. | For a welcome message, a summary, or a wrap-up that isn't about one element. |
Warning: Switching a step between tooltip and modal reloads that type's defaults — it does not preserve the old target, placement, or interaction settings. If you've tuned a tooltip and switch it to modal, switching back does not restore your earlier configuration.
Target (Tooltips Only)
A tooltip step must anchor to a target. You choose one of two kinds:
| Target type | How it works | Robustness |
| Component | A block you select from the page. The tooltip anchors to that block wherever it is on the page. | More robust — follows the block if it moves on the page. |
| Element | Any part of the page, located by a set of selectors generated from where the element sits in the page structure. You can also add a custom CSS selector. | Less robust — layout changes can break the selectors. Re-select the target after significant layout edits. |
Selecting a Target on the Canvas
Click the target button in the step's Content settings to enter selection mode. The canvas becomes a picker:
Move the cursor over the page — the element under the cursor is highlighted with a brand-colored box.
Click to select the element. A floating bar appears with Cancel and Save (Save stays disabled until something is selected).
Click Save to lock the target into the step.
Keyboard Shortcuts in Selection Mode
| Key | What it does |
Enter | Confirm the current selection (same as the Save button). |
↑ Up Arrow | Broaden the selection to the parent element. Useful when the cursor lands on a small inner element and you meant the container. |
Escape | Drop the current selection and return to hovering without leaving selection mode. |
Alt / Option | Pause and resume the hover picker — move the mouse freely without the highlight chasing the cursor. |
The Message
What a step says is composed on a small canvas using a focused palette of blocks: text, buttons, icons, cards, stacks, tags, dividers, images, carousels, and progress indicators. The same drag-and-drop building you know from pages, trimmed to what a tour bubble needs.
The buttons you add here are how users move through the tour. Wire a button to Control step → next to advance, or Control step → previous to go back. See Controlling a Walkthrough for the full wiring guide.
Timing and Interaction Rules
| Setting | Options | Default |
Show after | Delay (ms) or Scroll (% of page scrolled) | Immediately (no delay) |
Go to next step on click of Tooltip only (optional) | Target element, Outside the step, None (explicit controls only) | None |
Allow interaction with the page | On / Off | Off |
Allow interaction with the target element Tooltip only (optional) | On / Off | Off |
Wait until element appears Tooltip only (optional) | On / Off; if on, set a time limit in ms | Off |
If element doesn't appear Tooltip only (optional) | Skip step, End walkthrough | Skip step |
Warning: Both "Allow interaction with the page" and "Allow interaction with the target element" default to Off. If a step says "now click Save", turn on target-element interaction — otherwise the tour asks for something it won't let users do.
Mutual Exclusions
When Go to next step on click of target element is set, the "allow interaction with the target" switch is hidden — the target click is consumed as "advance the tour", not passed to the page.
When Go to next step on click of outside is set, the "allow interaction with the page" switch is hidden — outside clicks advance the tour rather than reaching the page.
Appearance Tab
Backdrop and Spotlight
By default a step dims the rest of the page behind a backdrop to focus attention on the step and its target.
| Setting | Description | Default |
Show backdrop | Toggle the dimmed overlay on or off entirely. | On |
Overlay color | The color of the dimmed background behind the step. | Semi-transparent dark (bg-overlay) |
Overlay opacity | How opaque the overlay is. | 75% |
Focus shape Tooltip only (optional) | The shape of the spotlight cut-out around the target: Rectangle or Circle. | Rectangle |
Placement
Where the step sits depends on its type:
| Type | Placement mode | Options |
| Tooltip | Automatic — picks the best side around the target automatically. | Automatic (default) |
| Tooltip | Manual — you choose the side and alignment. | top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end |
| Modal | Chooses where the card sits on screen. | center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right |
Sizing
Both tooltip and modal expose size controls:
| Property | Description | Tooltip default |
Width | Fixed width of the step. | 360px |
Min width | Minimum width. | — |
Max width | Maximum width. | — |
Height | Fixed height (step scrolls inside if content overflows). | — |
Max height | Maximum height before the step scrolls. | 400px |
Targeting — How the Target Is Found at Runtime
When the tour plays, the step re-finds its target live rather than using a fixed position. The search keeps watching the page, so a target that renders slightly after the page loads is still picked up. The page scrolls to bring the target into view before the tooltip appears.
For an element target, the step tries the recorded selectors, then the custom selector if one was provided. For a component target, the step finds the block directly by its identifier.
Note: An element target is described by where the element sits in the page structure at the time you selected it. Major layout edits — moving, wrapping, or renesting elements — can break those selectors. Re-select the target after significant page restructuring. Anchoring to a component is more robust because it tracks the block's ID, not its position in the DOM.
Key Gotchas
Missing targets are skipped by default
If a tooltip step's target isn't on screen, the step is skipped and the tour continues. A published tour can silently show fewer steps than you built — for example a step targeting a block only visible to admins simply won't appear for regular users. Configure If element doesn't appear to End walkthrough if that behavior is unacceptable.
Steps block all clicks by default
Both interaction switches are off by default. A step that instructs users to click something must have the appropriate interaction switch turned on — otherwise users see the instruction but cannot follow it.
Advancing on click and interaction are mutually exclusive
You cannot have a tooltip that both advances when its target is clicked AND passes that click through to the app. Clicking the target either advances the tour OR interacts with the element — not both on the same step.
Invisible or zero-size targets are not found
The target search only accepts elements that are actually rendered with real dimensions. A hidden, collapsed, or not-yet-drawn element counts as missing, and the step falls back to its missing-target behavior.
Related Pages
Building a Walkthrough — the builder where you add, order, and preview steps.
Controlling a Walkthrough — wiring a step's buttons to advance through the tour.
Walkthroughs Overview — the Walkthroughs tab and creating a tour.