Fork me on GitHub

Bootstrap Tour

The easiest way to show people how to use your website.
Not using Bootstrap? It works anyway!

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.

Code licensed under the Apache License v2.0.
Documentation licensed under CC BY 3.0.