Back to Dictionary
Onboarding & Tours
●●○Customize
Use sparingly

Popover Coach Step

Use Popover Coach Step when guidance needs text and context; use Spotlight Coach Mark when attention is the main job.

Use

Explaining one unfamiliar control while keeping the user oriented in the actual interface.

Avoid

Avoid it when the tour becomes a lecture or the popover hides the element it is explaining.

Safer Alternative

Tooltip Fade & Nudge

Risk Level

High attention

Timing

180-280ms entrance with no looping motion; users should read the content, not watch the container.

Easing

Use a fast ease-out with a small y-offset or scale, then stay still.

Risk

distractionaccessibility sensitive

Live Demo

Create project

Step 1 of 3

Start with a workspace.

What It Is

A small anchored popover that explains one interface element at a time and shows progress through a guided setup or product tour.

Decision Guidance

Use Popover Coach Step when guidance needs text and context; use Spotlight Coach Mark when attention is the main job.

Best For

Explaining one unfamiliar control while keeping the user oriented in the actual interface.

Avoid When

Avoid it when the tour becomes a lecture or the popover hides the element it is explaining.

Timing

180-280ms entrance with no looping motion; users should read the content, not watch the container.

Easing

Use a fast ease-out with a small y-offset or scale, then stay still.

Risk Tags

distractionaccessibility sensitive

Alternatives

Tooltip Fade & NudgeSpotlight / Coach MarkFocus Ring Highlight

✓When to Use

  • First-run flows where the next action is not obvious
  • Feature launches that need one focused explanation
  • Setup wizards where users need local context before proceeding

✕When NOT to Use

  • Interfaces where the user already clicked an obvious control
  • Long tours that explain every part of the page
  • Dense mobile screens where the popover blocks the actual task

Configuration Tips

  • 01Anchor the popover to a real UI element and keep the pointer visually connected
  • 02Show step count only when there are multiple steps
  • 03Keep entrance under 300ms so the guidance feels responsive

You've Seen It In

LinearNotionIntercom

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a guided onboarding popover anchored below a primary button. Animate it in with a short fade and upward slide, include "Step 1 of 3", one sentence of guidance, and a small progress line.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function PopoverCoachStep({ open }: { open: boolean }) {
  return (
    <div className="relative inline-flex">
      <button className="rounded-full bg-stone-950 px-4 py-2 text-white">Create project</button>
      {open && (
        <div className="absolute left-1/2 top-full mt-3 w-64 -translate-x-1/2 rounded-xl border bg-white p-4 shadow-xl">
          <div className="absolute -top-2 left-1/2 h-4 w-4 -translate-x-1/2 rotate-45 border-l border-t bg-white" />
          <p className="font-mono text-xs uppercase text-stone-400">Step 1 of 3</p>
          <p className="mt-2 text-sm text-stone-700">Start by creating your first workspace.</p>
        </div>
      )}
    </div>
  );
}

Related Effects

Pulsing Hotspot

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.

Tooltip Fade & Nudge

A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.

Spotlight / Coach Mark

The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.