Cacher is the code snippet organizer for pro developers

//
// GLOBAL OPTIONS
//

var tour = new Tour({

  name: "tour", //You can initialize several tours with different names in the same page and application.
  steps: [], //array of steps
  container: "body", //Appends the step popover to a specific element

  smartPlacement: true, //Dynamically reorients the popover by default by specifying auto for the placement, every time.
  keyboard: true, //left and right arrow navigation.
  autoscroll: true, //Autoscrolls the window when the step popover is out of view.

  storage: window.localStorage, //The storage system you want to use (window.localStorage, window.sessionStorage or your own object). You can set this option as false to disable storage persistence (the tour starts from beginning every time the page is loaded).
  
  debug: false, //debug information printed to the console

  backdrop: false, //Show a dark backdrop behind the popover and its element, highlighting the current step.
  backdropContainer: 'body', //HTML element on which the backdrop should be shown.
  backdropPadding: 0, //Add padding to the backdrop element that highlights the step element. It can be a number or a object containing optional top, right, bottom and left numbers.

  redirect: true, //Set a custom function to execute as redirect function. The default redirect relies on the traditional document.location.href
  orphan: false, //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.

  duration: false, //Set a expiration time in milliseconds for the steps. When the current step expires, the next step is automatically shown (sort of guided, automatized tour functionality
  delay: false, //Delay for the showing and hiding the tour steps. In milliseconds, or object containing optional show and hide numbers - defines the delays for showing and hiding respectively

  basePath: "", //default base path prepended to the path option of every single step. Very useful if you need to reuse the same tour on different environments or sub-projects.

  //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 
  // - step is the an object that contains all the other step options.
  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>
  </div>`,

  //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:
  // - key Contains the name of the state being saved. It can becurrent_step (for the state where the latest step the visitor viewed is saved) or end (for the state which is saved when the user complete the tour). Note that Bootstrap Tour prepends the key with tour_ when saving the state.
  // - value The value of the state been saved. Can be the index of the current step if the key is current_step, or yes if the key is end.
  afterGetState: function (key, value) {},
  // A simple example if to send a post request to your server each time there is a change:
  afterSetState: function (key, value) {
    $.post("/some/path", value);
  },
  afterRemoveState: function (key, value) {},

  onStart: function (tour) {}, //when tour starts
  onEnd: function (tour) {}, //when tour end
  onShow: function (tour) {}, //before each step is shown
  onShown: function (tour) {}, //after each step is shown
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {}, //when next step is called
  onPrev: function (tour) {}, //when prev step is called
  onPause: function (tour, duration) {}, //when pause is called. The second argument refers to the remaining duration.
  onResume: function (tour, duration) {},
  onRedirectError: function (tour) {} //when there is a redirection error. This happens when bootstrap tour cannot redirect to the path of the step

});

//
// STEP OPTIONS (override the Global options for a given step)
//

tour.addStep({

  path: "", //Path to the page on which the step should be shown. This allows you to build tours that span several pages!
  host: "", //Host of the page on which the step should be shown. This allows you to build tours for several sub-domains
  element: "", //HTML element (string or jQuery selector) on which the step popover should be shown. (If orphan is false, this option is required.)
  placement: "right", //How to position the popover ('top', 'bottom', 'left','right', 'auto':will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
  smartPlacement: true, //It dynamically reorients the popover by default by specifying auto for the placement.

  title: "",
  content: "",

  // next / prev should be used in conjunction
  next: 0, //Index of the step to show after this one, starting from 0 for the first step of the tour. -1 to not show the link to next step. By default, the next step (in the order you added them) will be shown.
  prev: 0, //Index of the step to show before this one, starting from 0 for the first step of the tour. -1 to not show the link to previous step. By default, the previous step (in the order you added them) will be shown.

  animation: true, //Apply a css fade transition to the tooltip.
  container: "body", //Attachment of popover. By default the popover is appended after the 'element' above. This option is particularly helpful for Internet Explorer.

  backdrop: false,
  backdropContainer: 'body',
  backdropPadding: false,

  redirect: true,
  reflex: false, // (??) Enable the reflex mode: attach an handler on click on the step element to continue the tour (YOU CAN CLICK ON THE DOM ELEMENT WHERE YOU ARE ATTACHING THE STEP, TO CONTINUE TO NEXT STEP). In order to bind the handler to a custom event, you can pass a string with its name. Also, the class tour-step-element-reflex is added to the element, as hook for your custom style (e.g: cursor: pointer).

  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) {},
  onRedirectError: function (tour) {}
});



//
// METHODS
//

addSteps([]) //Add multiple steps to the tour. Pass an array of objects.
addStep({}) //Add single step to the tour. Pass an object.

init() //Initialize the tour. You must do it BEFORE CALLING START()
start(true) //Start the tour. Pass true to 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) //Skip to a specific step. Pass i as the index of the step in the tour (0-based).

pause() //Pause the duration timer. It works only if tour or current step has duration.
resume() //Resume the duration timer. It works only if tour or current step has duration.
ended() //Verify if the tour ended. Returns boolean.

getStep(i) //Get the step object. Pass i as the index of the step in the tour (0-based).
getCurrentStep() //Get the index of the current step.
setCurrentStep(i) //Override the current step. Pass i as the index of the step in the tour (0-based).
redraw() //Triggers a redraw on the overlay element. Useful for Dynamically sized tour targets.


//
// MULTIPAGE
// (...)