Bootstrap tour start button

Question

I use bootstrap in my site and to explain my site I would like to use bootstrap tour. I have implement this in my test page and work fine. But the tour start when load the page, and I want starting a tour when click a button. I have follow this article to implement my bootstrap tour.

This is a javascript of the bootstrap tour demo:

(function(){

    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

and this is the html section:

<div class="content-section-a tour-step tour-step-one"> One <br>

<div class="content-section-a tour-step tour-step-two"> Two <br>

<div class="content-section-a tour-step tour-step-three"> Three <br>

How to start my tour by click a button?

Thanks

Answer 1

just change it to restart and it works.

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