Package Exports

svelte-tour

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-tour) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-tour

GitHub

Screenshot

Svelte components to create an interactive tour.

Quick start

Somewhere in your application—most likely at a high level near the entry-point—you need to include the Tour component. This handles showing the tour when it is run. It needs to have a TourTip component supplied to it. You can use the minimal default one supplied in the package if you like.

<script>
  import { Tour, TourTip } from 'svelte-tour';
</script>

<main>
  <slot></slot>
  <Tour TourTip={TourTip}></Tour>
</main>

Any item you want to include in the tour needs to be wrapped with the TourItem component. Include a message property to define the text to show in the tour tip.

<script>
  import { TourItem } from 'svelte-tour';
</script>

<main>
  <TourItem message="This is a button I want to include in the tour.">
    <button>Click here</button>
  </TourItem>
</main>

Call run to start the tour. It will tour you through all TourItems currently in the page.

<script>
  import { onMount } from 'svelte';
  import { run } from 'svelte-tour';

  onMount(run);
</script>

<main>
  <slot></slot>
  <Tour></Tour>
</main>

Options

Optionally you can include a TourTip component to handle the rendering of the content in the tour.

<script>
  import { Tour } from 'svelte-tour';
  import TourTip from 'my-tourtip-component';
</script>

<main>
  <slot></slot>
  <Tour {TourTip}></Tour>
</main>

Your TourTip will receive three parameters.

export let atEnd; // boolean - are we on the last item in the tour?
export let message; // string - the message for this step of the tour.
export let onClickNext; // func - function to trigger a move to the next step.