Highlight

Highlight elements on a page to guide users through a tour.

Highlight

Pass highlight (and optionally backdrop) to VTour to visually focus the current target element.

The tour will automatically start when the page loads

Customising the highlight

Override the highlight colour and offset with CSS variables:

#nt-tooltip {
  --nt-highlight-color: #f59e0b;
  --nt-highlight-offset: 6px;
  --nt-highlight-radius: 8px;
}

You can also enable highlighting on individual steps only by setting backdrop: true on the step definition rather than the component:

const steps: TourStep[] = [
  {
    target: ".important-button",
    title: "Key action",
    body: "This step has its own backdrop.",
    backdrop: true,
  },
];

useTour() composable

Control a tour from outside the component using the useTour() composable.

HTML elements

Pass an HTMLElement directly as the step target instead of a CSS selector.