A tour walks people through a page, one step at a time. Each step points at an element with a card beside it and dims the rest of the page around it; a step without a target shows in the middle.
Steps are plain data: a target (a selector, an element or a function that finds one), a title, and content as text or a template. beforeShow runs first, so a step can open the panel its target is in, and a target out of view is scrolled to.
Every card is a dialog. It’s modal, unless the step is interactive: then people can use what it points at. Escape ends the tour, and focus goes back where it was.
A first look
Four steps, the first without a target. finished and dismissed tell the two endings apart.
Your notes appear here.
Steps to try
beforeShow opens the settings before the second step points into them, and interactive lets people use the switch while the card is up.
Dark mode is off.