Product tours
A tour walks a visitor through your product step by step. Callout steps anchor to any element via a CSS selector; modal steps float centered for intros and wrap-ups. Tours can start automatically, from a link, or when the visitor clicks a trigger element — and steps can advance when the visitor clicks the highlighted target. Every control below shows the id selector to paste into a StepsKit step.
What it looks like
A step mid-tour: the page dims, the target element gets a spotlight, and the popover walks the visitor through — with progress and navigation.
Always-visible targets
The bread and butter of a tour: buttons, inputs, badges, and table rows that are always in the DOM.
#sk-tours-ctaLive#sk-tours-badge#sk-tours-search| Project | Status | Updated |
|---|---|---|
| Onboarding revamp | Live | 2 hours ago |
| Billing walkthrough | Draft | Yesterday |
| Admin quickstart | Live | 3 days ago |
The first row is #sk-tours-row-1 — rows make great callout targets.
Modal / Dialog
The dialog body mounts only when open. Point step 1 at the open button (event trigger or advance-on-click), then step 2 at a field inside — it waits for the dialog to render.
#sk-open-account-dialogtrigger / advance-on-click#sk-acct-name— name field (inside dialog)#sk-acct-plan— plan select (inside dialog)#sk-acct-save— save button (inside dialog)
Dropdown menu
Menu items are unmounted until the dropdown opens. Point a step at the menu button (advance-on-click), then at an option inside — it waits for the menu to open.
#sk-actions-menuadvance-on-click#sk-action-export— option (only in DOM when open)#sk-action-archive— option (only in DOM when open)
Lazy-loaded panel
The panel appears ~700ms after the click. A step pointed at it waits for it to mount; if it never appears, the step is skipped instead of pointing at empty space.
#sk-load-detailsadvance-on-click