Author: | callahanrts |
---|---|
Views Total: | 2,745 views |
Official Page: | Go to website |
Last Update: | September 10, 2017 |
License: | MIT |
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();