Product Tour
Spotlight an element, explain it, move to the next.
IntermediateWeb appUI component10–20hAI-buildable 4/5no setup
A guided tour that highlights real elements on the page with a cutout overlay and a positioned tooltip. The hard parts are all about the page moving underneath you — elements scrolling into view, resizing, or not existing yet when the step begins.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- An overlay dims the page with a cutout around the target element
- A tooltip positions itself near the target and flips to stay on screen
- Steps advance forward and back with keyboard support
- Targets scroll into view before their step begins
- The cutout follows the target if the page resizes
- A step whose target is missing is skipped rather than breaking the tour
- Completion state persists so the tour doesn't repeat
The interesting part
- Tooltip positioning that flips and shifts to stay within the viewport
- Keeping the cutout aligned during scroll and resize
- Waiting for a target that renders asynchronously
Once it works
- Add branching tours based on user actions
- Add a step requiring the user to actually perform the action
- Add tour authoring by clicking elements
Suggested stack
reacttypescripttailwindfloating-ui