Coach mark
An onboarding tip that points to one interface element, often spotlighting it while the rest of the page is dimmed.
See it
What it is
A coach mark is a short onboarding callout anchored to one part of the interface. It usually pairs a tooltip-like card with a spotlight cut through a dimmed scrim, so the new button or control is the only thing asking for attention. A sequence of coach marks becomes a product tour, but one mark can simply announce a feature added since the last visit.
Use one when a useful control is easy to miss and its purpose can be explained in a sentence. Show it in context, after the target has rendered and when the user is ready to act, then remember dismissal so it does not return on every visit. If the concept needs several paragraphs or practice data, use a guided setup or wizard instead.
Gotcha: the target can move, scroll offscreen, or disappear at a responsive breakpoint. Recalculate the callout while the layout changes and skip the step if its target is absent. Always offer Skip and Close, support Escape, keep keyboard focus visible, and do not block the whole app just to explain a secondary feature.
Ask AI for it
Build a dismissible coach mark that spotlights a target element and anchors a short callout beside it. Position the card with Floating UI using autoUpdate(), offset, flip, and shift middleware, and create the spotlight with a fixed rounded rectangle whose box-shadow spreads rgb(0 0 0 / 55%) across the viewport. Include a title, one sentence, Back, Next, Skip, and Close controls plus a '2 of 4' step label. Scroll the target into view before opening, recalculate on resize and scroll, skip missing targets, close on Escape, return focus to the launch point, and persist dismissal in localStorage. Respect prefers-reduced-motion.