2

I have the following very simple demo set up on my site and in this fiddle. It's virtually identical to the official demo. In neither case do I get a tour. What am I missing?

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.8.1/css/bootstrap-tour.min.css"> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.8.1/js/bootstrap-tour.min.js"></script>

<button class="btn" id="tour-go">Start the tour!</button>

<form>
    <input id="one" value="one" />
    <input id="two" value="two" />
    <input id="three" value="three" />
</form>

$(function () {
    var tour = new Tour({
        steps: [{
            element: "#one",
            title: "Title of my step",
            content: "Content of my step"
        }, {
            element: "#two",
            title: "Title of my step",
            content: "Content of my step"
        }, {
            element: "#three",
            title: "Title of my step",
            content: "Content of my step"
        }]
    });

    // Initialize the tour
    tour.init();

    $('#tour-go').click(function () {
        // Start the tour
        tour.start();
    });
});
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I've attempted loading Tour v0.9.1 locally as well, using JS and HTML from the official demo. Still no joy. – isherwood May 09 '14 at 17:18

4 Answers4

4

You're using bootstrap-tour v0.8.1, so your code isn't correct, the correct one would be:

var tour = new Tour() ;

tour.addSteps([{
    element: "#one",
    title: "Title of my step",
    content: "Content of my step"
}, {
    element: "#two",
    title: "Title of my step",
    content: "Content of my step"
}, {
    element: "#three",
    title: "Title of my step",
    content: "Content of my step"
}]) ;

This fiddle is working: http://jsfiddle.net/9LcQx/

Holt
  • 36,600
  • 7
  • 92
  • 139
  • 3
    I learned two things about this scenario: First, your syntax does work. Second, there's a bug in Tour that requires the use of `restart()` instead of `start()` in some cases. Here's a fiddle the at combines both fixes: http://jsfiddle.net/isherwood/tN4Uq/2 Thanks for the help. – isherwood May 13 '14 at 13:49
  • 1
    @isherwood I think what you see as a bug is a feature of bootstrap tour which use localstorage to keep the current step when reloading a page. If you want to disable this feature, you have to set `storage` option to `false` in the constructor. – Holt May 13 '14 at 14:53
  • I think you're right. I was referring to this bug: https://github.com/sorich87/bootstrap-tour/issues/212 but I'm guessing that it's been corrected. I wasn't aware of the state storage features built into Tour. Thanks. – isherwood May 13 '14 at 15:58
3

Replace your js with this from your fiddle:

$(function () {
    var tour = new Tour();
    tour.addStep({
      element: "#one",
      title: "Step 1",
      content: "Content for step 1"
    });

    tour.addStep({
      element: "#one",
      title: "Step 2",
      content: "Content for step 2"
    });

    tour.addStep({
      element: "#three",
      title: "Step 3",
      content: "Content for step 3"
    });
    // Initialize the tour
    tour.init();

    $('#tour-go').click(function () {
        // Start the tour
        tour.start();
    });
});
Prakash
  • 6,562
  • 3
  • 25
  • 33
  • This works for me unlike the other answer. Good job. – ntzm May 12 '14 at 20:38
  • 1
    Thanks. The different syntax was part of my problem. The other part was a bug in Tour requiring that I use `restart()` instead of `start()` for subsequent clicks. http://jsfiddle.net/isherwood/tN4Uq/2 – isherwood May 13 '14 at 13:50
0

Your mistake is use steps. but correct is you have to use tour.addStep to done this.

Check this Demo js Fiddle

jQuery

var tour = new Tour();

tour.addStep({
        element: "#one",
        title: "Title of my step",
        content: "Content of my step"
    });
tour.addStep({
        element: "#two",
        title: "Title of my step",
        content: "Content of my step"
});
tour.addStep({
        element: "#three",
        title: "Title of my step",
        content: "Content of my step"
});

// Initialize the tour
tour.init();

$('#tour-go').click(function () {
    // Start the tour
    console.log("Click");
    tour.start();
});
Community
  • 1
  • 1
Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76
  • That fiddle looks like the one I started with, but it uses what I assume to be old syntax and links to old versions of the external files (Bootstrap 2). At any rate, it doesn't work. – isherwood May 09 '14 at 16:23
  • Turns out your answer was on the right track. If you'd like to edit the answer I'll upvote. – isherwood May 13 '14 at 13:47
0

I tried all above proposed solutions and still couldn't make it work, so i found an article online that stated, existing bootstrap users are NOT supposed to use bootstrap-tour-standalone.min.js. Instead, they should use boostrap-tour-min.js.

Also, please verify that you are using appropriate version of bootstrap. "Popovers" didnt show in my case i switched to 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Mohit Chawla
  • 181
  • 7