Headless & custom UI

Replace the tooltip with your own snippet and keep everything else. Or go fully headless with svelte-tourlight/core: the state machine and DOM helpers, no CSS and no components.

Custom tooltip

Card one

Card two

Bare core

Alpha Beta Gamma

Idle.

svelte-tourlight/core

import { createTourStateMachine, generateClipPath, measureElement } from 'svelte-tourlight/core';

const machine = createTourStateMachine({ steps });
machine.subscribe((state) => {
  const el = document.querySelector(steps[state.currentStepIndex].target);
  overlay.style.clipPath = generateClipPath(measureElement(el, 6), 0, 10);
});
await machine.start();

Custom tooltip snippet

{#snippet card(p: TooltipRenderProps)}
  <p class="eyebrow">{p.currentIndex + 1} / {p.totalSteps}</p>
  <h2 id={p.titleId}>{p.step.title}</h2>
  <p id={p.contentId}>{p.step.content}</p>
  <button onclick={p.previous} disabled={p.isFirst}>Back</button>
  <button data-tourlight-primary onclick={p.next}>{p.isLast ? 'Finish' : 'Next'}</button>
{/snippet}

<SpotlightTour id="custom" {steps} tooltip={card} />