Product Tour Tooltip
Inline product-tour step blueprint with a highlighted target, coach-mark card, step 2 of 5 badge, and progress dots.
Inline product-tour step blueprint with a highlighted target, coach-mark card, step 2 of 5 badge, and progress dots.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Product Tour Tooltip is a guided-tour step rendered as a static inline blueprint: a target element (the Members panel, 3 members, 2 pending invites) highlighted with a primary ring outline, and a coach-mark card beside it showing step 2 of 5, the title Invite your team, a plain explanation, and a Back / Got it action row. A progress dots row at the foot of the card marks position without relying on any tooltip portal.
Step and body are one const object; total and current step drive both the badge and the dot renderer. The inline highlight makes the target obvious in a screenshot or a preview iframe where a real Radix Tooltip would escape the root.
Reach for this block when you need to ship a guided tour whose steps must screenshot cleanly and survive an iframe, wired to a step index from your tour state. Advance the current step in your controller and re-render.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the new-user activation tour. Other coach-mark steps:
Tip: the context line inside the body is worth more than the step count; tell people what happens next, not just where they are.