Spotlight — Core

Spotlight / Feature Discovery

Guide users through your interface with step-by-step tours. An overlay highlights target elements while a tooltip provides context and navigation controls. Add a JSON array of steps to any trigger via data-vd-spotlight and it starts on click.

Interactive Tour

Click the button below to start a 3-step feature discovery tour that highlights the elements in this card.

Search Bar

Notifications

Profile Menu

<button class="vd-btn vd-btn-primary" data-vd-spotlight='[
  {"target":"#search","title":"Quick Search","description":"Find anything instantly."},
  {"target":"#bell","title":"Notifications","description":"Mentions and updates."},
  {"target":"#me","title":"Your Profile","description":"Account and theme settings."}
]'>
  Start Tour
</button>

<!-- Targets referenced by the steps above -->
<div id="search">…</div>
<div id="bell">…</div>
<div id="me">…</div>

Engine wiring

import { ref } from 'vue';
import { useSpotlight } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useSpotlight(root);   // wires every [data-vd-spotlight] inside root

API Reference

CSS Classes

Class	Description
`.vd-spotlight-overlay`	Full-screen dimmer with a cut-out around the target.
`.vd-spotlight-tooltip`	Floating step tooltip positioned beside the target.
`.vd-spotlight-title`	Tooltip heading (the step's title).
`.vd-spotlight-description`	Tooltip body copy (the step's description).
`.vd-spotlight-counter`	“2 / 3” progress indicator.
`.vd-spotlight-footer`	Footer row holding the navigation buttons.
`.vd-spotlight-btn`	Secondary navigation button (Back / Skip).
`.vd-spotlight-btn-primary`	Primary navigation button (Next / Done).
`.vd-spotlight-target`	Class applied to the highlighted element while active.

Data Attributes

Attribute	Description
`data-vd-spotlight`	JSON array of steps on the trigger. Each step: { target, title, description }.

JavaScript Methods

Method	Description
`useSpotlight(root)`	Wire every [data-vd-spotlight] trigger within root; returns a controller. Call once in setup().
`controller.start(steps, opts?)`	Start a tour from an array of step objects.
`controller.stop()`	End the active tour and remove the overlay.

Accessibility

The overlay traps focus on the active step's controls; Tab cycles Back / Skip / Next.
Escape ends the tour; ← / → step between targets.
The highlighted target is scrolled into view and announced via the tooltip's role="dialog".