jQuery and Bootstrap tour

Quick and easy solution to build jQuery and Bootstrap tour for your website or web project.

A simple jQuery and Bootstrap tour solution

It’s an easy to use, flexible and stable plugin, for creating tours. It may be useful in many modern web projects.

Bootstrap tour - easy to use!
Bootstrap tour – easy to use!


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" 
<script src="jquery.min.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>

Now only we need some JavaScript code, to define and setup our tour:

var tour = new Tour({
  steps: [
    element: "#my-element",
    title: "Title of my step1",
    content: "Content of my step1"
    element: "#my-2nd-element",
    title: "Title of my step2",
    content: "Content of my step2"

// initialize the tour

// start the tour

That’s it!

License: MIT (documentation licensed under CC BY 3.0).

Project homepage:




See also:

Hopscotch – jQuery tour plugin

Enjoy the tour!