The easiest way to show people how to use your website.
Not using Bootstrap? It works anyway!
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>
// Instantiate 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();
This will run your tour once and will use your browser's local storage to keep track of whether you have run the tour. If you wish to run the tour more than once, be sure to check out the "storage" attribute in the full documentation.
Do you want to do more? Read the full documentation.
Code licensed under the Apache License v2.0.
Documentation licensed under CC BY 3.0.