title: How to launch the Bootstrap Tour on button click?
body: <p>I am wanting to find out why my Bootstrap Tour isn't launching on click.</p>
  
  <p>See image below for reference and code also. Note, I left out the majority of the page's code because I didn't want to overwhelm you. Hopefully, there is enough here for you to get this tour working.</p>
  
  <p>What I am doing wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/8RE9A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8RE9A.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  
  
  &lt;!-- Button for Tour Start --&gt;
  &lt;a id="MSL-initialize-tour" class="MSL-tour-button MSL-white-button" href="#"&gt;START TOUR&lt;/a&gt;
  
  
  &lt;img id="MSL-tour-welcome" class="MSL-Headine-Desktop" src="https://sephora.csod.com/clientimg/sephora/welcome/1-22-18_Headline_V2.png" /&gt;
  
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  
  // Instance the tour
  var tour = new Tour({
    steps: [ 
    {
      element: "#MSL-tour-welcome",
      placement: "top",
      title: "&lt;span class='glyphicon glyphicon-star'&gt;&lt;/span&gt; Welcome to MSL!",
      content: "Press 'next' to see page features"
    }
  ]});
  
  
  $('#MSL-initialize-tour').click(function(){
    tour.init();
    tour.start();
  });
  
  &lt;/script&gt;
  </code></pre>