Toolmark

Appearance

toolmark-monorepo / @toolmark/tour/overlay / mountTourOverlay

Function: mountTourOverlay() ​

mountTourOverlay(tour, o?): () => void

Defined in: packages/tour/src/overlay/index.ts:84

Renders a running tour: a spotlight around the step's anchor and a dialog beside it (Next, Back, Close, step counter, live status). The overlay is modal (aria-modal, focus trap) only in do mode; while status is confirming it releases the trap, hides the backdrop, drops its stacking and lets pointer input pass through the dialog, so the app's inline confirmation stays usable. While busy (a do call in flight), Next/Back are aria-disabled and the status says so. show/guide leave the anchor operable (guide focuses it; F6/Alt+T toggle focus between dialog and anchor). Arrow keys move between steps (mirrored in RTL) and Esc stops the tour while focus is in the dialog. The overlay removes itself when the tour is done or stopped and returns focus to the element focused before it mounted.

All step text is rendered as text, never as markup.

Parameters ​

tour ​

Tour

The tour from startTour.

o? ​

TourOverlayOptions = {}

Container and string overrides.

Returns ​

Unmounts the overlay (idempotent; does not stop the tour).

() => void

Example ​

ts
import '@toolmark/tour/styles.css'
const tour = await startTour(tm, { mode: 'show', steps })
const unmount = mountTourOverlay(tour)