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:

ES Module support

If you use ES modules in your project (Webpack, Rollup) import Tourguide.js like so:

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>

Leave a Reply

Your email address will not be published. Required fields are marked *