Tour

Guided product tour that highlights page elements by CSS selector.

Jump to API reference

Import

Vue
import { UiTour } from '@ziyarago/ui/vue'

Centered steps

Vue
<UiTour
  :steps="[{ title: 'Welcome', text: 'Let us show you around the booking tools.' }, { title: 'Search', text: 'Find hotels by city and dates.' }, { title: 'Done', text: 'You are ready to book.' }]"
  :open="open"
  @close="open = false"
 />

Highlight element

Vue
<UiTour
  :steps="[{ target: 'h1', title: 'Page title', text: 'This highlights the page heading.' }, { title: 'All set', text: 'That is the tour.' }]"
  :open="open"
  @close="open = false"
 />

API reference

Guided product tour that dims the page, highlights a target element and shows a step popover.

Props

PropType and valuesDefaultDescription
openbooleanfalseShows the tour when true; renders nothing when false.
steps{ target?: string; title: string; text: string }[]'[]'Steps. target is a CSS selector of the element to highlight; without it the step is shown centered over a full dim.
stepnumber—Controlled zero-based step index. When omitted the tour keeps it internally (reset to 0 on close). Update it from the step event.

Events

Vue: @name. React: onName.

closeCalled on the close icon, the Escape key and after Finish on the last step.
stepCalled with the new zero-based step index on Next, Back and the arrow keys.

Notes

  • Keyboard: ArrowRight/ArrowLeft go to the next/previous step (reversed in RTL), Escape closes. Focus is not moved, so the page stays usable.
  • Targets are looked up with document.querySelector and scrolled into view.
  • The internal step resets to 0 whenever the tour closes.