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

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


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


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-content="Tour me please 1">
    Step 1

<h4 data-tourme-seq="2" 
    data-tourme-content="Tour me please 2">
    Step 2

<h4 data-tourme-seq="3" 
    data-tourme-content="Tour me please 3">
    Step 3

<h4 data-tourme-seq="4" 
    data-tourme-content="Tour me please 4">
    Step 4

Start the tour.


  // the number of times to repeat
  repeat : 2,

  // shows directional arrows
  arrow : true


You Might Be Interested In:

Leave a Reply