title: Bootstrap tooltip initialises but isn't showing up
body: <p>Before marking this question as a duplicate, I know there is one exact same question with the exact same problem but the solution isn't working for me. Here is the <a href="https://stackoverflow.com/questions/12172379/bootstrap-tooltips-initialising-but-not-showing">link</a> to that question.</p>
  
  <p>The problem is, I know tooltips are being initialized because when I hover over my button, this markup shows up in my DOM.</p>
  
  <pre><code>&lt;div class="tooltip fade top in" style="top: -34px; left: 20.5px; display: block; "&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;Add Quotation.&lt;/div&gt;&lt;/div
  </code></pre>
  
  <p>But it isn't showing up in the browser! In case of inspect element, It shows me the exact tooltip but it isn't appearing. It's transparent! The JSfiddles and all are working but it's not working in just my code.</p>
  
  <p>I am using <strong>Laravel Mix</strong> with <strong>Vue.js</strong>. Anything extra is to be done or I am missing something?</p>
  
  <p><strong>UPDATE</strong>: I have already added <code>data-toggle</code>, <code>data-placement</code> and <code>title</code> in my element on which I want a tooltip.</p>