How to use Bootstrap Tour

Right now web applications are stronger than ever and even though some of them are simple to understand others are really complex applications that need some understanding before use.

One approach these applications take is to give us a tour of the product, usually with little pop ups that we can skip or leave until the end.

That is exactly what Bootstrap Tour does in a simple and clean way.

Getting started

This plugin was at first aimed at being a simple and easy to use Bootstrap tour plugin but now we can use it anyway we choose, they have separate JavaScript and CSS files for Bootstrap users and for non-Bootstrap users. If you are using Bootstrap you should include:

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

Add these two files after all the dependencies, and by dependencies I mean all the Bootstrap CSS and JS and after jQuery.

If you will not be using Bootstrap you will need to include the standalone version of this plugin:

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

In this case the only dependency you have is jQuery and this route we’ll take with our example.

Starting our tour

Let’s say we have two elements in our page and those two elements are the ones we would like the tour to act on. The first would just welcome the visitor and the second one would tell them what our app is about.

<h1 class="one">My Awesome App</h1>

<div class="two">
  <img src="http://lorempixel.com/300/200"/>
</div>

In order to create our tour we first need to instantiate a new tour:

var tour = new Tour({
  // Code for our tour
});

After this we need to create the steps of our tour, and every step has 3 core options: the element we want to target, the title of the popup and the content. So our two pop ups would look something like:

var tour = new Tour({
  steps: [
  {
    element: ".one",
    title: "Welcome",
    content: "Welcome to our app, take this tour to be familirized with it."
  },
  {
    element: ".two",
    title: "This Image",
    content: "In this application we generate random placeholder images for any case."
  }  
]
});

If we want to start our tour right away, we first need to initiate and then start it:

tour.init();
tour.start();

And if you load your page now, you can see that as soon as the page loads so does our Tour, you can change how it loads, if for example you wanted it to load only after an element is clicked you can do so by wrapping the start function in a click event handler:

$(‘.element’).click(function(){
  tour.start();
});

You can see an example in this pen I created.

The API

These are the basics of what you need to get started using Bootstrap tour but as usual there are a lot of other options you can take advantage of, like:

• Name – This is where you can define the name of your tour and this allows you to have multiple tours in the same page just by giving them different names.
• Steps – This is where you define the steps of the tour, it’s the main option and the only one you really need in order to get up and running.
• Container – By default the popups are appended to the body but here you can change that and append them to any element on your page.
• Keyboard – Sets whether the user is able to navigate between popups with the mouse. Default is true.
• Storage – By default the objects are stored in localStorage but you can also set it to window.sessionStorage or disable storage completely so that the tour starts every time the user reloads.
• Backdrop – Show a backdrop in a Lightbox style that highlights the current step.
• Duration – Using duration you can set an expiration for the steps, by setting this to something like 2s if the user hasn’t moved on to the next step in that time it will move automatically .
• Template – Here you can create a custom template for your popups and then customize it any way you want with CSS. This is a great function if you wish full control.
• Functions – We also have a couple of functions that will execute in a determined time, we have onStart, onEnd, onShow, onShown, onHide, onHidden, onNext, onPrev, onPause, onResume. These functions can all be used as callback functions when necessary.

These are some of the options we have, if you go over to the API page of Bootstrap Tour you can see that there are even more options you can take advantage of.

This is not a general jQuery plugin, it’s actually a very specific one you won’t be using on every website but it’s one that gives us a simple way to perform something that at a glance would take a considerable amount of time to set up ourselves.