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

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

How you pick the target depends on Target Type. For a Component target, choose the block from the Target Component dropdown (it shows No component selected until you pick one), or click Reselect to pick it on the canvas. For an Element target, click Select under Element Path, or Reselect once a path is set. Picking on the canvas enters selection mode, and 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 Step to advance, or Control Step → Previous Step to go back. See Controlling a Walkthrough for the full wiring guide.

Timing and Interaction Rules

Setting	Applies to	Options	Default
Show After	Tooltip and modal	Delay (ms) or Scroll (Scroll Percentage of the page)	Delay of 0 ms (shows immediately)
Go to next step on click of	Tooltip only	Element (the target element), Outside (anywhere outside the step), None (explicit controls only)	None
Allow Interaction with Page	Tooltip and modal	On / Off	Off
Allow Interaction with Target Element	Tooltip only	On / Off	Off
Wait Until Element Appears	Tooltip only	On / Off; when on, set Wait Delay (ms)	Off
If Element Doesn't Appear	Tooltip only	Skip Step, End Walkthrough	Skip Step

Warning: Both Allow Interaction with Page and Allow Interaction with Target Element default to Off. If a step says "now click Save", turn on Allow Interaction with Target Element — otherwise the tour asks for something it won't let users do.

Mutual Exclusions

When Go to next step on click of is set to Element, the Allow Interaction with Target Element 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 is set to Outside, the Allow Interaction with 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.	The theme's standard overlay color (a dark tint)
Overlay Opacity	How opaque the overlay is.	75%
Focus Shape	Tooltip only. 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. New steps of either type start with the same defaults:

Property	Description	Default (tooltip and modal)
Width	Fixed width of the step.	360px
Min Width	Minimum width.	—
Max Width	Maximum width.	—
Height	Fixed height (step scrolls inside if content overflows).	—
Min Height	Minimum height.	—
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. Set 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.

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.

Steps & Targeting