Bootstrap Tour, How do I force stop the auto start?

Question

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>

Answer 1

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.