CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapbootstrap-tour
ST''
ST''

Reputation: 46

How to make bootstrap-tour work?

I have this code in a page. I'm trying to make bootstrap-tour work but it's not happening. What am I doing wrong? What am I missing here?

<!DOCTYPE html>
<html>
<head>

    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-tour.css" rel="stylesheet">
    <link href="bootstrap-tour.min.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="html5shiv.js"><![endif]-->
        <script>
    // 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: "#content", // 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: "#content1",
    title: "Title of my step",
    content: "Content of my step"
  }
 ]);

 // Initialize the tour
 tour.init();

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


</head>
<body>


<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>



<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.js"></script>
<script src="bootstrap-tour.min.js"></script>
</body>
</html>

I searched in google but it seems no one has ever had any trouble in getting the tour set-up. I don't know what am I missing. Can be some simple thing. Help me guys. I've included these files:

CSS::

Bootstrap.css v3.0.0
bootstrap-tour.css - v0.8.0
bootstrap-tour.min.css - v0.8.0

JS::

bootstrap-tour.min.js - v0.8.0
bootstrap-tour.js - v0.8.0
bootstrap-popover.js v2.0.4
bootstrap-tooltip.js v2.0.4
jQuery JavaScript Library v1.9.0

Upvotes: 3

Views: 17798

Answers (6)

user11678618
user11678618

Reputation: 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My ToDo Application</title>
    <link href="style.css" rel="stylesheet" type = "text/css"/>
    <link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-tour.min.css" rel="stylesheet">



</head>
<body>
        <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-tour.min.js"></script>


    <div id = "pop-up">

        <div id="form">

                <h2>Welcome to ToDo Manager</h2><hr>
        <input type="text" id = 'username' placeholder = "Enter ToDo Name here"><br>
        <button value="Continue" id='Create'>Continue</button><br><br>
        <p id = "warning">**<span>NOTE: </span>Refreshing the page will lead to loss of data created**</p>
        </div>
    </div>
    <div id = "body">
    <div>
            <p id = "warning" class = "align">**<span> NOTE: </span>Refreshing the page will lead to loss of data created**</p>
    <h1 id = manager>The ToDo Manager</h1><hr>
    <p id = "hello"></p>
        <input type="text" placeholder = "Enter you Todo here" id = 'newTodo'required><br>
        <button id = "add">Add ToDo</button><br>
        <button id = "remove">Remove ToDo</button> <br>
        <button id = "removeAll">Clear List</button> 

        <ul id="list">


        </ul>
    </div>
    <script src="script.js"></script>
    <script>var tour = new Tour({
            steps: [
            {
              element: "#newTodo",
              title: "Todo Title",
              content: "Enter the name of the task here, to add it in your task list."
            },
            {
              element: "#add",
              title: "Add Button",
              content: "Clicking this will add your new task to the list."
            },
            {
                element: "#remove",
                title: "Delete Button",
                content: "Clicking this will delete the completed (striked) tasks from the list."
            },
            {
               element: "#removeAll",
               title: "Delete all Button",
               content: "Clicking this will delete all the tasks from the list."
            },
            {
                element: "#manager",
                title: "ToDo Manager",
                content: "Hey "+username+"! Dont forget to complete your tasks!"
            }

          ],
          animation: true,
    backdrop: true,  
    storage: false,
    smartPlacement: true,
        });

          // Initialize the tour
          tour.init();

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

</div>
</body>
</html>



why is this not working??

Upvotes: 1

BigMan Kev
BigMan Kev

Reputation: 41

From my experience you have to put the stages below when you call the tour script.

So the steps you outline in the tag should be inserted just before the end tag. This should then make the steps work. Currently you are initialising steps which are for a script that hasn't been loaded.

So it should look like this:

<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script>
  // 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: "#content", // 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: "#content1",
      title: "Title of my step",
      content: "Content of my step"
    }
 ]);

 // Initialize the tour
 tour.init();

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

That's how I got mine to work.

Upvotes: 4

laney
laney

Reputation: 354

For anyone else landing on this issue, assuming you've tried the other suggestions, if using JQuery with Bootstrap Tour, wrapping the script in the JQuery onload function worked for me to ensure all requirements were loaded first:

$(function() { ... });

like this:

    <script>
    $(function () {
        // Instance the tour
        var tour = new Tour({
            name: 'one',
            steps: [
                {
                    element: "#my-element",
                    title: "Title of my step",
                    content: "Content of my step"
                },
                {
                    element: "#my-other-element",
                    title: "Title of my step",
                    content: "Content of my step"
                }
            ]
        });

        // Initialize the tour
        tour.init();

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

Make sure each 'element' in the steps is referencing an id of a HTML element on your page so the tour knows what it should be pointing at - otherwise it wont show.

Upvotes: 0

Damien Overeem
Damien Overeem

Reputation: 4529

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.

Upvotes: 3

Dev
Dev

Reputation: 6786

See http://jsfiddle.net/4uS59/

you have wrong ids in yout html 

<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>

should be 

<div id="content">
    Hello, World!
</div>
<br><br><br>
<div id="content1">
    Another Hello, World!
</div>

Upvotes: 6

shivaP
shivaP

Reputation: 297

check the sample code

HTML

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

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

JS

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"
});

tour.restart();

Jsfiddle

Upvotes: 1

Related Questions