title: Popovers for "Bootstrap Tour" not working
body: <p>I've been trying to install a tour onto my site using "Bootstrap Tour", I'm very new to Javascript and coding in general and I've been at it all day. Figured I'd come on here to ask people who are more experienced. </p>
  
  <p>hi1 works sometimes, but even then, it never moves onto hi2. The popover is always broken too. </p>
  
  <p>I've tried to put a little demo together below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> // Instance the tour
  var tour = new Tour({
    name: "tour",
    steps: [
    {
      element: "#hi",
      title: "Title of my stepbjhbhjbhm",
      content: "Content of my step buhjnkjnkuhj"
    },
    {
      element: "#hi2",
      title: "Title of my step",
      content: "Content of my step"
    }],
    container: "body",
    smartPlacement: true,
    keyboard: true,
    storage: false,
    debug: false,
    backdrop: false,
    backdropContainer: 'body',
    backdropPadding: 0,
    redirect: true,
    orphan: false,
    duration: false,
    delay: false,
    basePath: "",
    template: "&lt;div class='popover tour'&gt;&lt;div class='arrow'&gt;&lt;/div&gt; &lt;h3 class='popover-title'&gt;&lt;/h3&gt; &lt;div class='popover-content'&gt;&lt;/div&gt; &lt;div class='popover-navigation'&gt; &lt;button class='btn btn-default' data-role='prev'&gt;« Prev&lt;/button&gt; &lt;span data-role='separator'&gt;|&lt;/span&gt; &lt;button class='btn btn-default' data-role='next'&gt;Next »&lt;/button&gt;&lt;/div&gt;&lt;button class='btn btn-default' data-role='end'&gt;End tour&lt;/button&gt;&lt;/div&gt;"
  });
    
  // Initialize the tour
  tour.init();
  
  $( document ).ready(function() {  
      // Start the tour
      tour.start();
  });
  &lt;/script&gt;
  &lt;!-- end tour --&gt; </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;
  
  &lt;button class="btn" id="hi"&gt;Button 1&lt;/button&gt;
  
  &lt;/div&gt;
  
  &lt;div class="col-md-6"&gt;
  
  &lt;button class="btn" id="hi2"&gt;Button 1&lt;/button&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>