Tour

A guided walkthrough: highlight one element at a time, explain it, move on. Starts when your app dispatches ink:tour:start.

Example

First stop: this card.

Second stop: this one.

<Tour
  steps={[
    { target: "#tour-target-1", title: "Welcome", body: "..." },
    { target: "#tour-target-2", title: "Second", body: "..." },
  }}
/>
<script>
  document.getElementById("start-tour")
    .addEventListener("click", () => {
      document.dispatchEvent(new CustomEvent("ink:tour:start", { bubbles: true }));
    });
</script>

Props

Prop	Type	Default	Description
`steps`	`Array`	-	CSS selector target + title + body each.

Events

Dispatch ink:tour:start on document to begin. Listen for ink:tour:end on completion.

Accessibility

The tooltip is a labeled dialog; Escape ends the tour.
Highlights never move focus; Back is disabled on the first step.