The browser does the hard parts now
Your browser already ships everything a product tour needs. Guidepost is the little bit of glue that wires it together.
Page goes inert, but you can still click the highlighted thing. Pick a mode, then run the tour.
Five things you used to write yourself
Every layer of this tour is just a browser feature now. Here's what your browser's got, checked when the page loaded.
Read the detailHow it works
Why is there no z-index?
The card is a popover, so it lives in the top layer. Nothing on your
page can cover it, and no parent with overflow: hidden can clip it.
How does the card stay glued to things?
CSS anchor positioning. The browser keeps it stuck there through scroll and resize, so you don't need Floating UI or a scroll listener. Older browsers fall back to measuring, which is what the JS fallback tab turns on.
Why can I still click the highlighted thing?
The dim is one element with a hole cut in it by clip-path. Clipping
affects hit testing too, so your clicks fall right through the hole. No stack of
four divs boxing in the target.
What stops Tab escaping the tour?
inert does it. Everything except the card and the highlighted element
gets marked inert, which also hides it from screen readers. No intercepting keydowns,
no sneaky sentinel nodes.
How does it fade out without a timer?
@starting-style plus transition-behavior: allow-discrete.
The card animates itself in and out, so nothing pops out of existence mid-fade.