Want to see how it works right away? Try on JSFiddle
Install Tourguide.js
npm i tourguidejs Why do you need Tourguide.js
Every time you build you next awesome web app, you sit back and stare lovingly at your handy-work 🙂 But then inevitably someone comes along asking one and the same inconvenient question: “So, how do you use it?"
You try to explain, but people are just not getting it! You write how-tos, lengthy docs, and step-by-step guides, and yet, nothing seems to be enough.
This is why we built Tourguide.js – a simple yet powerful explainer utility, designed to help you make the reply a little bit less painful.
Getting started
There are a few ways you can use Tourguide.js
CommonJS
Download tourguide.min.js, add it to your project libraries, and then include it on page:
import Tourguide from "tourguide/tourguide.esm.js";
Usage
Before use, Tourguide.js must be instantiated:
var tourguide = new Tourguide({options});root: root element the tour steps will attach to; default is document.body
selector: if you want to use content based tour approach you can use this option to specify the common selector for the tour steps; default is [data-tour]
animationspeed: speed of all tour built-in animations; default is 300
padding: additional padding to add to step highlighter; default is 5(px)
steps: if you choose to take JSON based tour approach provide use this property to provide the data; default is null
src: if you want to load the tour from a remote URL you may specify it here; default is null
request: if you want to load the tour from a remote URL you may provide request headers here
onStart: callback function triggered when the tour starts
onStop: callback function triggered when tour stops
onComplete: callback triggered when tour completes
onStep: callback triggered when a tour step is shown
onAction: callback triggered when user clicks on the highlighted element
Content based approach
Simplest approach is to read the descriptions right off the elements on page. This works best if you are using an MVC approach in your application. Simply add tour descriptions to the HTML elements in your page template:
<button aria-label="Collaborate" data-tour="step: 1; title: Step1;
content: Lorem ipsum dolor sit amet">
Collaborate
</button>
Continue on https://github.com/LikaloLLC/tourguide.js
0 Comments