1

I could really use help turning off the "auto start" function of Bootstrap Tour plugin for a webpage I am building. The tour itself works great. It hops from step to step as intended. BUT, the tour starts on It's own when a user views the page for the first time. The user can press "end tour" and the tour won't auto start anymore. But, I'd like to prevent the auto-start all together.

I need your help to find a way (or a setting) to prevent the tour from auto-starting on it's own. I don't want the user to have to press "end tour"... They should only press "Start Tour" when they want the tour to start!

See code below. Note, I left out the majority of the page's code because I didn't want to overwhelm you.

Please help, how do I STOP the tour from auto-starting?

<!-- Bootrap CSS  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Tour CSS  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css">


<a id="MSL-initialize-tour">
    START TOUR <span class="glyphicon glyphicon-play"></span>
</a>

<!-------- JQuery JS -------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-------- Bootsrap JS -------->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-------- Bootsrap Tour JS -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script>

<!-------- Bootsrap Tour Steps -------->
<script>
// Instance the tour
var tour = new Tour({
  steps: [ 
  {
    element: "#MSL-initialize-tour",
    placement: "bottom",
    title: "<span class='glyphicon glyphicon-star'></span> Welcome to MSL!",
    content: "Press 'next' to see page features."
  }
]});

tour.init();
tour.start();

$('#MSL-initialize-tour').click(function(){
 tour.restart();
});
</script>

4 Answers 4

2

You need to move

tour.init();
tour.start();

inside of a function. Right now they are being called as soon as the Javascript is loaded.

Here is a JSFiddle example

You can see how init, start, and restart are all in the same function which is called when the user clicks the "Start Tour" button.

2
  • OK, sweet! This seems to work. But the user below offered a different solution. Can either one work? Thanks
    – Matie
    Jan 18, 2018 at 20:27
  • Please accept this answer if it solves your issue
    – beaver
    Jan 19, 2018 at 6:44
0

Not sure if I undertsand your question right, but I think you should remove:

tour.start();
1
  • Yes, it seems you understand my question. This seems to work
    – Matie
    Jan 18, 2018 at 20:27
0

A common problem I was having with bootstrap-tour is when a end-user ended the tour and then if I made a change to the tour there was no way to version it so they would see it again but keep it hidden if they had already seen that version. I was able to fix this by adding the code below between the tour.init() and tour.start(). By updating the "tourpageversion", it effectively adds versioning and forces a restart so that the end-user could see the tour again. The parameter "tourversion_layout" would be unique to the tour or in my case the page the tour is on.

// Instance the tour
var tour = new Tour({
steps: [ ... ]
});

// Initialize the tour
tour.init();

//check page tour version
var tourpageversion = "2018-03-30";
if (localStorage.getItem("tourversion_layout") !== tourpageversion) {
    localStorage.setItem("tourversion_layout", tourpageversion);
    tour.restart();
}

// Start the tour
tour.start();

0
tour.start();

Don't use tour.init(); if you won't wanna restart from first step.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.