6
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Trello Inspired</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  </head>
  <body>
    <div class="left-container">
      <span class="logo"><h2>Title 2</h2></span>
      <p class="left-msg welcom-msg">Now that registration and filling out forms is out the way, let's get you all set up.</p>
      <p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
    </div>
    <div class="right-container">
      <button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
      <button class="btn btn-default start-exam-btn" style="display:none;">Preparation</button>
    </div>
  </body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../js/libs/bootstrap.min.js"></script>
  <script src="../js/plugins/bootstrap-tour.min.js"></script>
  <script type="text/javascript">

    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#enrol-btn1",
        title: "Exam Enrolment",
        content: "First let's enrol to an exam"
      },
      {
        element: "#see-schedule",
        title: "Your Schedule",
        content: "Great, let's see your new schedule."
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
  </script>
</html>

I have added all the necessary dependencies. I am using Bootstrap 3 so no need to include popover.js individually. I have looked at the plugin home page for instructions but it didn't help either.

Elton
  • 415
  • 3
  • 7
  • 14

7 Answers7

18

Bootstraptour stores the tour's progress in your localStorage. This also means that when you are trying to set it up and ie. used a wrong element ID, bootstraptour can still store that it should display step 2 next time.. even if it does not exist, at which point it does nothing.

You either need to clear your localStorage in your browser, or (perhaps easier), change the name of your tour like so:

var tour = new Tour({
    name: '<some random name>'
});

The above method worked for me, since i was having the same problem. I located the fix after debugging the code itself and finding out it was trying to get currentstep "1" instead of "0", which was the wrong index.

Damien Overeem
  • 4,487
  • 4
  • 36
  • 55
11
  1. you should add element that you specified for the second step of the tour: element: "#see-schedule". Without it after first step the "tour" will become invisible.
  2. use tour.start(true) - from documentation API:

Start the tour. Pass true to force the start.

Probably you will want some button to start the Tour. The code for it will look like:

<a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>

$("#startTour").click(function(){
    tour.restart();
})

Example on JsFiddle - There the tour starts itself on window is loaded and also start on "Start tour" button click.

Nicolai
  • 1,907
  • 1
  • 23
  • 31
  • And once you get it going, be aware that it uses your browser's localStorage to keep track of whether it has been run. If you can only get the tour to run once, try emptying localStorage. – mlissner May 30 '14 at 16:22
6

I found that while developing with Bootstrap Tour, it makes life easier if you clear the 'localStorage' before initialising it, so that you don't get any lingering session data. In the case of the initial question, this would be:

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: "#enrol-btn1",
    title: "Exam Enrolment",
    content: "First let's enrol to an exam"
  },
  {
    element: "#see-schedule",
    title: "Your Schedule",
    content: "Great, let's see your new schedule."
  }
]});

// Clear bootstrap tour session data
localStorage.removeItem('tour_current_step');
localStorage.removeItem('tour_end');

// Initialize the tour
tour.init();

// Start the tour
tour.start();
Ulrich Dohou
  • 1,509
  • 14
  • 25
David Pratt
  • 703
  • 7
  • 16
  • 2
    You should selectively clean the localStorage - tour_current_step & tour_end keys by localStorage.removeItem(key); Clearing the entire localStorage is not really intended here. You can view the localStorage in developer tools (chrome) going to "Resources" tab >> "Local storage" option. – Rishi Jul 23 '15 at 17:20
  • makes no difference – djack109 Oct 30 '17 at 17:16
  • I agree, we should not clear entire localStorage, which help in page load time in next revisit of the site, we need to clear particular localStorage used for Bootstrap – Vinod kumar G Sep 06 '18 at 06:25
  • This worked for me, using bootstrap v4.2.1 and bootstrap-tour v0.12.0 – Souleste Dec 29 '20 at 18:40
3

I have found intro.js to be much better(and smaller package) http://usablica.github.io/intro.js/

Raja Rao
  • 5,691
  • 2
  • 28
  • 31
1

Is maybe posible that you are using bootstrap 4.3.1, this extensión isn't compatible with this versión of bootstrap. You can try to use bootstrap 3.3.1, but this change can damage your actual front style.

user2909088
  • 11
  • 3
  • I encountered this problem using Bootstrap 4.x. The instructions to use the standalone version worked for me: `Otherwise, just include bootstrap-tour-standalone.min.css and bootstrap-tour-standalone.min.js` – Stephen Lead Nov 16 '19 at 03:18
1

I found naming the tour and then clearing the local storage helped me work with Bootstrap Tour

var tour = new Tour({
    name: 'mytourname'
]});

localStorage.clear();
// or
localStorage.removeItem("mytourname_end");

;

gilletterazor
  • 11
  • 1
0

My tour wouldn't start occasionally and I figured out that for bootstrap-tour to work correctly everytime you must have the following two keys in your local storage (See your local storage from the browser's developer tools)-

  1. Site Tour_current_step = "0"
  2. Site Tour_end = "yes"

As soon as you call the function to start the tour, set these keys if they are not present in your local storage. I set these keys manually through javascript and it works perfectly now. Hope it helps.

shubham srivastava
  • 309
  • 1
  • 2
  • 8