title: Bootstrap 4 tooltip in wrong position
body: <p>I'm using Bootstrap 4 and have compiled a copy of the CSS from the Sass files. Using Ruby Sass 3.7.4</p>
  
  <p>I've removed some parts of the Sass, but don't think there are dependencies that have any affect on how Tooltips work: <code>code</code>, <code>card</code>, <code>badge</code>, <code>jumbotron</code>, <code>progress</code>, <code>carousel</code>.</p>
  
  <p>The markup is as simple as this:</p>
  
  <pre><code> &lt;button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"&gt;Tooltip on right&lt;/button&gt;
  </code></pre>
  
  <p>And it renders like this (incorrectly):</p>
  
  <p><a href="https://i.stack.imgur.com/NAKZA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NAKZA.png" alt="enter image description here"></a></p>
  
  <p>I've removed all of my own CSS so it's literally the compiled Bootstrap 4 CSS.</p>
  
  <p>I've also included <code>bootstrap.bundle.min.js</code> and <code>jquery-3.2.1.min.js</code></p>
  
  <p>I'm not sure why this is happening because the examples given in the docs <a href="https://getbootstrap.com/docs/4.0/components/tooltips/#examples" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/tooltips/#examples</a> work as I'd expect.</p>
  
  <p>The js to initialise the Tooltips is in a js file that's present on page load:</p>
  
  <pre><code>$(function () { 
      $('[data-toggle="tooltip"]').tooltip();
  });
  </code></pre>
  
  <p>Anyone have any ideas on this?</p>