Bootstrap Tour test

A test page for Bootstrap tour issues.

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.8.1/css/bootstrap-tour.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.8.1/js/bootstrap-tour.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button id="initiate_tour" type="button" class="btn btn-danger">Initiate Tour</button>

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

CSS

body {
    padding: 50px;
}
input, button.btn {
    margin-bottom: 30px;
}

JavaScript

// Instance the tour
var tour = new Tour({
  storage: false,
  debug: true,
  template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><nav class='popover-navigation'><div class='btn-group'><button class='btn btn-default' data-role='prev'>« Prev</button><button class='btn btn-default' data-role='next'>Next »</button></div></nav></div>"
});

tour.addSteps([
    {
        element: "#one",
        title: "title1",
        content: "content1"
    },
    {
        element: "#two",
        title: "title2",
        content: "content2"
    },
    {
        element: "#three",
        title: "title3",
        content: "content3"
    },
    {
        element: "#four",
        title: "title4",
        content: "content4"
    }

  ]);

$("#initiate_tour").click(function(){
    // Start the tour
    if(!tour.start()){
    	tour.restart();
    }
});