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!

Usage

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>

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
tour.init();

// start the tour
tour.start();

That’s it!

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

Project homepage:

http://bootstraptour.com

GitHub:

https://github.com/sorich87/bootstrap-tour

See also:

Hopscotch – jQuery tour plugin

Enjoy the tour!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1