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

Script_Coded · Answer 1 · 2017-01-03T01:21:02.460

0

Simply call tour.start(); when you click the button, and not on page load. Assuming your startbutton has the id start-tour. This snippet can be placed within (function() { ... })

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

edited Jan 03 '17 at 01:21

answered Jan 02 '17 at 23:48

Script_Coded

709
8
21

I have add this in my page: and this button: but not work – Frankie Jan 03 '17 at 00:11
How to switch off the script in the loading page time? – Frankie Jan 03 '17 at 00:12
In addition to what you have done you will have to include jQuery and remove tour.init(); from your code. – Script_Coded Jan 03 '17 at 00:13
I have jquery and I have remove the tour.init() but not Work – Frankie Jan 03 '17 at 00:21
Can you post a complete script with button? – Frankie Jan 03 '17 at 00:21
I'm sorry, but I don't have access to my computer at the moment. Have you placed the snippet at the end of your anonymous function? – Script_Coded Jan 03 '17 at 00:23
Yes I have add at the end of my function but not work – Frankie Jan 03 '17 at 00:27
It would seem I have missunderstood the library. Use the updated snippet in the answer. – Script_Coded Jan 03 '17 at 01:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132234/discussion-between-script-coded-and-frankie). – Script_Coded Jan 03 '17 at 21:05

score 0 · Accepted Answer · answered May 21 '19 at 11:46

0

just change it to restart and it works.

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

answered May 21 '19 at 11:46

Sheghzo

26
5

score 0 · Answer 3 · answered Aug 06 '19 at 13:02

first we write our operations to a function. Here it is important to write the definition of the tour outside the function.

var tour = new Tour();    

  function StartTour(){
      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(true);
}

Then we call StartTour function in the button click function.

  $(".tour-step").click(function() {
    StartTour(); 
   });

Bootstrap tour start button

3 Answers3