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

Category: Javascript | January 8, 2019
Author: mejuliver
Views Total: 220
Official Page: Go to website
Last Update: January 8, 2019
License: MIT

Preview:

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

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

});

You Might Be Interested In:


Leave a Reply