Find things faster
Show only the projects you own.
Click Next: the lit hole is the spotlight; the pulsing dot on its corner is the beacon
Product Tour (Coach Marks)
/ <Tour> · driver() /
also called guided tour, onboarding tour, walkthrough, feature tour, feature discovery (Material), app tour
“The page goes dark except one button, with a little bubble pointing at it” is a product tour, also called coach marks: a first-run walkthrough built with libraries like Ant Design's Tour or driver.js. A dim layer covers the app except a rounded spotlight around one control, and a bubble anchored to it explains that control, counts the steps (“2 of 4”) and offers Back, Next and Skip; a pulsing beacon can mark where to click. A tooltip shows on hover and a modal sits in the middle of the screen; Apple's TipKit shows one tip, not a tour.
If you called it…
…you meant Product Tour (Coach Marks).
Anatomy — every part, named
- 1Spotlight (cut-out)
stagePadding, stageRadius (driver.js)“The lit hole around the button” is the spotlight: a rounded cut-out in the dim layer, padded around the target (not the Mac's search, and not a glow that follows the cursor).
- 2Tour bubble
steps[].popover (driver.js)“The little card with an arrow pointing at the button” is the tour bubble: the app opens it, not your pointer, and it stays until the step changes.
- 3Step counter
showProgress (driver.js)“The 2 of 4 in the corner of the tutorial” is the step counter; some libraries draw it as a row of dots instead, and it is the same part.
- 4Beacon
CoachmarkBeacon (Carbon for IBM Products)“The big round animation that encircles a button” is the beacon: a small dot whose ring grows and fades to say “click here”; a status dot's ping means “online” instead.
Prompt — paste into your agent
Add a product tour (Ant Design Tour; driver.js driver()): dim the page about 50% black and cut a rounded spotlight around one target at a time with about 10px of padding, plus a bubble anchored to it by an arrow, a “2 of 4” step counter and Back, Next and Skip. Glide the spotlight and bubble to each next target. Never build it as a hover tooltip or a centered modal.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my product tour (Ant Design Tour, driver.js driver(), react-joyride Joyride). Rule out: the spotlight measured once, so it drifts after a scroll, resize or layout shift; the target not on the page yet when its step starts, so the bubble lands in the middle of the screen; a sticky header, transformed ancestor or modal with a higher z-index covering the dim layer; the target not clickable through the hole (blockTargetInteraction, canClickTarget or pointer-events); the arrow still pointing at the previous target because it was not re-aligned on the step change; a target inside a scroll container that never scrolls into view; a click on the dim area closing the tour by default; the tour restarting on every visit because “seen” is never stored. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Ant Design | <Tour> | steps[].target is the control each step lights up |
| driver.js | driver() | showProgress prints “2 of 4”; stagePadding and stageRadius shape the hole |
| react-joyride | <Joyride> | continuous adds Next; skipBeacon hides its pulsing dot |
| Shepherd | new Shepherd.Tour() | useModalOverlay cuts the opening around attachTo.element |
| Intro.js | introJs.tour() | the old introJs() call is deprecated |
| SwiftUI | .popoverTip(_:arrowEdge:action:) | one tip, not a tour; macOS 14+ |
See also
From the maker of this siteFowlNote · Notes that float over any app, one shortcut awayfowlnote.app →