This package only supports Alpine v3.x
This package needs TailwindCSS
This package currently does not work fantastic with the JIT compiler
Add a dynamic tour to your Alpine 3.x components with a custom directive.
This plugin adds a new x-tour
to Alpine.
npm install @edsardio/alpine-tour
Register your x-tour
directive to Alpine.
import Alpine from "alpinejs";
import Tour from "@edsardio/alpine-tour";
Alpine.plugin(Tour);
window.Alpine = Alpine;
window.Alpine.start();
To create a tour add the directive to the element as following. The tour will be ordered by the step. Either bottom, top, left or right will let the directive know where to show the pop-up with the information.
<div x-data> <!-- Note: the tour must be inside an element with x-data to be run -->
<div x-tour.bottom="{step: 1, title: 'Example title', description: 'This is the description'}"></div>
<div x-tour.top="{step: 2, title: 'Example title', description: 'This is the description'}"></div>
<div x-tour.left="{step: 3, title: 'Example title', description: 'This is the description'}"></div>
<div x-tour.right="{step: 4, title: 'Example title', description: 'This is the description'}"></div>
</div>
To start the tour add the following.
<button x-tour.start>Start tour</button>
The tour can be navigated using the left and right arrow key, and can be closed using the escape button (or the cross in the pop-up).
To overwrite the default texts in the tour you can do the following:
window.Alpine.store('tourtranslations', {
previous: 'Vorige',
next: 'Volgende',
finish: 'Afronden'
});