Introduce App’s New Features Step By Step – tourMe.js

Preview:

Description:

tourMe.js is a JavaScript library for creating guided tours through your web app.

Ideal for introducing new features and highlighted functionalities of your app on document ready.

How to use it:

Insert the tourMe.js’ files into the document.

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

Initialize the tourMe.

var $tour = new tourMe();

Attach the appropriate steps to your elements using the following data options.

• data-tourme-seq: sequence number
• data-tourme-arrow: the direction of arrows
• data-tourme-top: offset in pixels
• data-tourme-content: step content
• data-tourme-classes: extra CSS class(es)
• data-tourme-anchor: the selector of the content element

<h4 data-tourme-seq="1" 
    data-tourme-arrow="arrow-up" 
    data-tourme-top="20" 
    data-tourme-content="Tour me please 1">
    Step 1
</h4>
<h4 data-tourme-seq="2" 
    data-tourme-arrow="arrow-down" 
    data-tourme-content="Tour me please 2">
    Step 2
</h4>
<h4 data-tourme-seq="3" 
    data-tourme-arrow="arrow-left" 
    data-tourme-left="20"
    data-tourme-content="Tour me please 3">
    Step 3
</h4>
<h4 data-tourme-seq="4" 
    data-tourme-arrow="arrow-right" 
    data-tourme-classes="my-class"
    data-tourme-content="Tour me please 4">
    Step 4
</h4>

Start the tour.

$tour.start({
  // the number of times to repeat
  repeat : 2,
  // shows directional arrows
  arrow : true
});