Interactive Visual Guide Plugin For Bootstrap - jQuery Tour

A jQuery plugin to create an accessible, interactive visual guide using Bootstrap popover component that lets your users guide through / scroll between new features and functions in your web app.

More features:

• Easy to create custom, dynamic steps in the JavaScript.
• Smart position depending on the screen size.
• Allows to smoothly scroll between steps on long web page.
• Allows to store the current guide state using HTML5 storage.
• Keyboard interactions.
• Lots of customization options and callback functions.
• Compatible with Bootstrap 3/4.

Basic usage:

1. Load the jQuery Bootstrap Tour's JavaScript and CSS files into your Bootstrap project.

<!-- Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link href="bootstrap-tour.css" rel="stylesheet">
<!-- JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="bootstrap-tour.js"></script>

2. Or load the standalone version of the plugin without the Bootstrap framework.

<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap-tour-standalone.css">
<!-- JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="bootstrap-tour-standalone.js"></script>

3. Create a new 'Tour' object and define an array of step objects as follows:

var myTour = new Tour({
    steps: [
    {
      element: "#logo",
      title: "Logo Element",
      content: "This is step One",
      placement: "bottom",
      // more step options here
    },
    {
      element: "h1",
      title: "jQuery Bootstrap Tour",
      content: "This is step two",
      placement: "bottom"
    },
    {
      element: "h2",
      title: "Footer Element",
      content: "This is the last step"
    }
]});

4. Initialize the site tour.

myTour.init();

5. Start the tour when needed.

myTour.start();

6. All possible plugin options to customize the side tour.

var myTour = new Tour({

    // default options
    name: 'tour',
    steps: [],
    container: 'body',
    autoscroll: true,
    keyboard: true,
    storage: storage,
    debug: false,
    backdrop: false,
    backdropContainer: 'body',
    backdropPadding: 0,
    redirect: true, // custom function to execute as redirect function
    orphan: false, // shows the step regardless whether its element is not set
    duration: false,
    delay: false,
    basePath: '', // default base path prepended to the path option of every single step
    template: '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-default" data-role="prev">&laquo; Prev</button> <button class="btn btn-sm btn-default" data-role="next">Next &raquo;</button> <button class="btn btn-sm btn-default" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> </div> <button class="btn btn-sm btn-default" data-role="end">End tour</button> </div> </div>',

    // callback funtions.
    afterSetState: function(key, value) {},
    afterGetState: function(key, value) {},
    afterRemoveState: function(key) {},
    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) {},
    onRedirectError: function(tour) {}
    
]});

7. Default options to customize the tour steps.

var myTour = new Tour({
    steps: [
    {
      path: "",
      host: "",
      element: "",
      placement: "right",
      smartPlacement: true,
      title: "",
      content: "",
      next: 0,
      prev: 0,
      animation: true,
      container: "body",
      backdrop: false,
      backdropContainer: 'body',
      backdropPadding: 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) {},
      onRedirectError: function (tour) {}
    }
]});

8. API methods:

// Add steps to the tour.
myTour.addSteps([STEPS])  

// Add a step to the tour.
myTour.addStep({});

// restart the tour
myTour.restart()

// end the tour
myTour.end()

// goto the next step
myTour.next()

// back to the previous step
myTour.prev()  

// goto a specific step
myTour.goTo(i)

// pause the duration timer
myTour.pause()

// resume the duration timer
myTour.resume()

// check if the tour is ended
myTour.ended()

// get the step object
myTour.getStep(i)

// get the current step
myTour.getCurrentStep() 

// override the current step
myTour.setCurrentStep(i)

// redraw the tour
myTour.redraw()

Changelog:

2018-10-14

• fix autoscroll when placement contains 'auto'

2017-10-08

• Release 0.12.0: Upgrade for Bootstrap 4
• Set orphan popover position to fixed in css instead of in bootstrap-tour.coffee
• Fix arrow CSS
• Remove smartPlacement option since Popper handles it

---

This awesome jQuery plugin is developed by sorich87. For more Advanced Usages, please check the demo page or visit the official website.