The How-to It's simple!

Add the dependencies

If you are using Bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js :

<link href= "bootstrap.min.css" rel= "stylesheet" > <link href= "bootstrap-tour.min.css" rel= "stylesheet" > ... <script src= "jquery.min.js" ></script> <script src= "bootstrap.min.js" ></script> <script src= "bootstrap-tour.min.js" ></script>

Otherwise, just include bootstrap-tour-standalone.min.css and bootstrap-tour-standalone.min.js :

<link href= "bootstrap-tour-standalone.min.css" rel= "stylesheet" > ... <script src= "jquery.min.js" ></script> <script src= "bootstrap-tour-standalone.min.js" ></script>

Setup your tour:

// Instance the tour var tour = new Tour ({ steps : [ { element : "#my-element" , title : "Title of my step" , content : "Content of my step" }, { element : "#my-other-element" , title : "Title of my step" , content : "Content of my step" } ]}); // Initialize the tour tour . init (); // Start the tour tour . start ();

Do you want to do more? Read the full documentation.