Dynamic Feature Tour JavaScript Library – Tiny Tour

Preview:

Description:

Tiny Tour is a minimal, dynamic feature tour JavaScript library used to guide your users through a tour of your web app.

How to use it:

Include the Tiny Tour’s files on the html page as this:

<link href="tour.min.css" rel="stylesheet">
<script src="tour.min.js"></script>

Create a set of DIV elements where you want to append the guided tours to.

<div class='one'></div>
<div class='two'></div>
<div class='three'></div>
<div class='four'></div>
<div class='five'></div>

Create the dynamic tours in the JavaScript as these:

window.tour = new Tour({
  padding: 0,
  nextText: 'More',
  doneText: 'Done',
  prevText: 'Less',
  tipClasses: 'tip-class active',
  steps: [
    {
      element: ".one",
      title: "Tourquoise",
      description: "This box is tourqoise!",
      position: "right"
    },
    {
      element: ".two",
      title: "Red",
      description: "Look how red this box is!",
      data: "Custom Data",
      position: "bottom"
    },
    {
      element: ".three",
      title: "Blue",
      description: "Almost too blue! Reminds of a default anchor tag.",
      position: "bottom"
    },
    {
      element: ".four",
      title: "Green",
      description: "Trees!",
      position: "left"
    },
    {
      element: ".five",
      title: "Purple",
      description: "Because there should probably be five of these.",
      position: "top"
    }
  ]
})

Start the tours.

tour.override('showStep', function(self, step) {
  self(step);
})
tour.override('end', function(self, step) {
  self(step);
})
tour.start();