Author: | mejuliver |
---|---|
Views Total: | 323 views |
Official Page: | Go to website |
Last Update: | January 8, 2019 |
License: | MIT |
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 });