Search code examples
javascriptjquerytwitter-bootstrapbootstrap-tour

Bootstrap-Tour Standalone Not Working

I am trying to implement a test of Bootstrap-tour in order to become familiar with it and I cannot even get the basic example on their site to work.

I took the example off the site and am including all the appropriate files but I get nothing. No errors in the console, nothing.

Here is a live demo of the code below. http://connormckelvey.com/test/test.html

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <link href="tour/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
    <script src="tour/js/bootstrap-tour-standalone.min.js"></script>

    <script>
    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#test",
        title: "Title of my step",
        content: "Content of my step"
      },
      {
        element: "#test1",
        title: "Title of my step",
        content: "Content of my step"
      }
    ]
    });

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
    </script>
    <style>
        div {
            margin: 20px auto;
            width: 500px;
            padding: 50px;
            background: #EBEBEB;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>

    <div id="test1">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</body>

I am very confused as such things like this are so simple to troubleshoot using the console, but without any feedback, I don't know where to begin.

Solution

  • Running your script in the console results it it running (though you have layout issues). You probably need to wrap your tour script in document.ready so it waits for the DOM to be available:

    $(document).ready(function() { ... })

    or the shorthand

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

    You could also move it to the bottom of the page, just ahead of </body>.