Tour Playground
Targets that only appear after an interaction — for testing tours that open a modal or dropdown and then highlight something inside it. Each control shows the id selector to paste into a StepsKit step, event trigger, or advance-on-click.
1 · 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)
2 · 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)
3 · 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