 
    
    Quick and easy way to build your product tours with Twitter Bootstrap Popovers.
<!DOCTYPE html>
<html>
<head>
    ...
    <link href="bootstrap-tour.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="html5shiv.js"><![endif]-->
</head>
<body>
    ...
    <script src="jquery.js"></script>
    <script src="bootstrap.tooltip.js"></script>
    <script src="bootstrap.popover.js"></script>
    <script src="bootstrap-tour.js"></script>
</body>
</html>// Instance the tour
var tour = new Tour();
// Add your steps. Not too many, you don't really want to get your users sleepy
tour.addSteps([
  {
    element: "#my-element", // string (jQuery selector) - html element next to which the step popover should be shown
    title: "Title of my step", // string - title of the popover
    content: "Content of my step" // string - content of the popover
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]);
// Initialize the tour
tour.init();
// Start the tour
tour.start();var tour = new Tour({
  name: "tour",
  container: "body",
  keyboard: true,
  storage: window.localStorage,
  debug: false,
  backdrop: false,
  redirect: true,
  orphan: false,
  duration: false,
  basePath: "",
  template: "<div class='popover tour'>
    <div class='arrow'></div>
    <h3 class='popover-title'></h3>
    <div class='popover-content'></div>
    <div class='popover-navigation'>
        <button class='btn btn-default' data-role='prev'>« Prev</button>
        <span data-role='separator'>|</span>
        <button class='btn btn-default' data-role='next'>Next »</button>
    </div>
    <button class='btn btn-default' data-role='end'>End tour</button>
    </nav>
  </div>",
  afterGetState: function(key, value) {},
  afterSetState: function(key, value) {},
  afterRemoveState: function(key, value) {},
  onStart: function(tour) {},
  onEnd: function(tour) {},
  onShow: function(tour) {},
  onShown: function(tour) {}
  onHide: function(tour) {},
  onHidden: function(tour) {},
  onNext: function(tour) {},
  onPrev: function(tour) {},
  onPause: function(tour, duration) {},
  onResume: function(tour, duration) {}
});| Name | Type | Description | Default | 
|---|---|---|---|
| name | String | This option is used to build the name of the storage item where the tour state is stored. You can initialize several tours with different names in the same page and application. | 'tour' | 
| container | String | Appends the step popover to a specific element. See Usage section of Popover. | 'body' | 
| keyboard | Boolean | This option set the left and right arrow navigation. | true | 
| storage | Object | The storage system you want to use. could be the objects window.localStorage,
              window.sessionStorage or your own object. You can set this option as falseto disable storage
              persistence (the tour starts from beginning everytime the page is
              loaded).Read more about DOM Storage interfaces. | window.localStorage | 
| debug | Boolean | Set this option to true to have some useful informations printed in the console. | false | 
| backdrop | Boolean | Show a dark backdrop behind the popover and its element, highlighting the current step. | false | 
| redirect | Boolean|Function | Set a custom function to execute as redirect function.
              The default redirect relies on the traditional document.location.href | true | 
| orphan | Boolean | Allow to show the step regardless whether its element is not set, is not present in the page or is hidden. The step is fixed positioned in the middle of the page. | false | 
| duration NEW | Boolean|String | Set a expiration time for the steps. When the current step expires, the next step is automatically shown. See it as a sort of guided, automatized tour functionality. The value is specified in milliseconds | false | 
| basePath | String | Specify a default base path prepended to the pathoption of every single
              step. Very useful if you need to reuse the same tour on different
              environments or sub-projects. | '' | 
| template | String|Function | String or function that returns a string of the HTML template for
              the popovers. If you pass a Function, two parameters are available:
              i is the position of step in the tour and
              step is the an object that contains all the other step
              options. From version 0.5, the navigation template is included inside the template so you can easily rewrite it. However, Bootstrap Tour maps the previous, next and end logics to the elements which have the related data-roleattribute. Therefore, you can also have multiple elements with the samedata-roleattribute. |  | 
| afterGetState, afterSetState, afterRemoveState | Function | You may want to do something right after Bootstrap Tour read, write or remove
              the state. Just pass functions to these. Your functions can have two parameters: 
 A simple example if to send a post request to your server each time there is a change:  | function(key, value) { } | 
| onStart | Function | Function to execute when the tour starts. | function(tour) { } | 
| onEnd | Function | Function to execute when the tour ends. | function(tour) { } | 
| onShow | Function | Function to execute right before each step is shown. | function(tour) { } | 
| onShown | Function | Function to execute right after each step is shown. | function(tour) { } | 
| onHide | Function | Function to execute right before each step is hidden. | function(tour) { } | 
| onHidden | Function | Function to execute right after each step is hidden. | function(tour) { } | 
| onNext | Function | Function to execute when next step is called. | function(tour) { } | 
| onPrev | Function | Function to execute when prev step is called. | function(tour) { } | 
| onPause NEW | Function | Function to execute when pause is called. The second argument refers to the remaining duration. | function(tour, duration) { } | 
| onResume NEW | Function | Function to execute when resume is called. The second argument refers to the remaining duration. | function(tour, duration) { } | 
tour.addStep({
  path: "",
  element: "",
  placement: "right",
  title: "",
  content: "",
  next: 0,
  prev: 0,
  animation: true,
  container: "body",
  backdrop: false,
  redirect: true,
  reflex: false,
  orphan: false,
  template: "",
  onShow: function(tour) {},
  onShown: function(tour) {},
  onHide: function(tour) {},
  onHidden: function(tour) {},
  onNext: function(tour) {},
  onPrev: function(tour) {},
  onPause: function(tour) {},
  onResume: function(tour) {}
});| Name | Type | Description | Default | 
|---|---|---|---|
| path | String | Path to the page on which the step should be shown. This allows you to build tours that span several pages! | '' | 
| element | String (jQuery selector) | HTML element on which the step popover should be shown. If orphan is false, this option is required. | '' | 
| placement | String|Function | How to position the popover. Possible choices: 'top','bottom','left','right'. | 'right' | 
| title | String|Function | Step title | '' | 
| content | String|Function | Step content | '' | 
| next | Integer | Index of the step to show after this one, starting from 0for the first step of the
              tour.-1to not show the link
              to next step. By default, the next step (in the order you added
              them) will be shown.This option should be used in conjunction with prev. | 0 | 
| prev | Integer | Index of the step to show before this one, starting from 0for the first step of the
              tour.-1to not show the link
              to previous step. By default, the previous step (in the order you added
              them) will be shown.This option should be used in conjunction with next. | 0 | 
| animation | Boolean | Apply a css fade transition to the tooltip. | true | 
| container | String (jQuery selector) | Attachment of popover. Pass an element to append the popover to. By default the popover is appended after the 'element' above. This option is particularly helpful for Internet Explorer. | 'body' | 
| backdrop | Boolean | Show a dark backdrop behind the popover and its element, highlighting the current step. | false | 
| redirect | Boolean|Function | Set a custom function to execute as redirect function.
              The default redirect relies on the traditional document.location.href | true | 
| reflex | Boolean | Enable the reflex mode: you can click on the element for continue the tour. | false | 
| orphan | Boolean | Allow to show the step regardless whether its element is not set, is not present in the page or is hidden. The step is fixed positioned in the middle of the page. | false | 
| duration NEW | Boolean|String | Set a expiration time for the stes. When the step expires, the next step is automatically shown. See it as a sort of guided, automatized tour functionality. The value is specified in milliseconds | false | 
| template | String|Function | String or function that returns a string of the HTML template for
              the popovers. If you pass a Function, two parameters are available:
              i is the position of step in the tour and
              step is the an object that contains all the other step
              options. From version 0.5, the navigation template is included inside the template so you can easily rewrite it. However, Bootstrap Tour maps the previous, next and end logics to the elements which have the related data-roleattribute. Therefore, you can also have multiple elements with the samedata-roleattribute. |  | 
| onShow | Function | Function to execute right before the step is shown. It overrides the
              global onShowoption. | function(tour) { } | 
| onShown | Function | Function to execute right after the step is shown. It overrides the
              global onShownoption. | function(tour) { } | 
| onHide | Function | Function to execute right before the step is hidden. It overrides
              the global onHideoption. | function(tour) { } | 
| onHidden | Function | Function to execute right after the step is hidden. It overrides the
              global onHiddenoption. | function(tour) { } | 
| onNext | Function | Function to execute when next step is called. It overrides the
              global onNextoption. | function(tour) { } | 
| onPrev | Function | Function to execute when prev step is called. It overrides the global onPrevoption. | function(tour) { } | 
| onPause NEW | Function | Function to execute when pause is called. The second argument refers to the
              remaining duration. It overrides the global the onPauseoption | function(tour, duration) { } | 
| onResume NEW | Function | Function to execute when resume is called. The second argument refers to the
              remaining duration. It overrides the global onResumeoption | function(tour, duration) { } | 
| Name | Description | 
|---|---|
| init() | Initialize the tour. You must do it before calling start. | 
| start( true) | Start the tour. Pass trueto force the start. | 
| restart() | Restart the tour after it ended. | 
| end() | End the tour prematurely. | 
| next() | Skip to the next step. | 
| prev() | Go back to the previous step. | 
| goTo( i)
              UPDATED | Skip to a specific step. Pass ias the
              position of the step in the tour, starting from 0 for the first step.From version 0.7.0, the method has been renamed since some Javascript compilers are confused by the property name goto, which is a reserved word) | 
| pause() | Pause the duration timer. It works only if tour or current stap has duration. | 
| resume() | Resume the duration timer. It works only if tour or current stap has duration. | 
| ended() | Verify if the tour ended. Returns boolean. | 
Without your bug reports and pull requests, we are nothing. Make this plugin better!
Files to be developed inside the project are located under
                  /src/.
Compiled sources are then automatically put under
                  /build/ (and /test/).
// Start a server and run the demo page
grunt
grunt run
// Compile all sources
grunt build
// Compile all sources and run the tests
grunt test
// Automatically release a new version (see below for more details)
grunt releaseReleasing a new version is completely automated using the Grunt task grunt release.
grunt release // patch release
grunt release:minor // minor release
grunt release:major // major releaseRunning grunt run will start a small server on port 3000 and opens the browser to the webpage. It will also start watching for changes in the index.coffee which will trigger then live reloading of the page in the browser.
Tests are written using Jasmine and they run headlessly through PhantomJS.
                Simply run grunt test or watch them with grunt watch:test (this will execute them automatically every time you change the specs).
You can also open the _SpecRunner.html (generated after you run grunt test) to run the tests in the browser.
Code licensed under the Apache License v2.0.
        Documentation licensed under CC BY 3.0.
        Well, the same licenses as Bootstrap. We are lazy! ;)