Getting Error on Bootstrap 4 : "Uncaught Error: Tooltip is transitioning"

Question

I'm using Bootstrap 4, and on my current website, I'm using Tooltip. My JS is in the right format but sometimes I get an error in Console.

This Is My Javascript | Bootstrap 4

<script src="vendor/assets/js/jquery.min.js"></script>
<script src="vendor/assets/js/jquery.easing.min.js"></script>
<script src="vendor/assets/js/tether.min.js"></script>
<script src="vendor/assets/js/bootstrap.min.js"></script>

This is Tooltip Javascript

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

This Is Error in Console

bootstrap.min.js:7 Uncaught Error: Tooltip is transitioning
   at h.hide (bootstrap.min.js:7)
   at h._leave (bootstrap.min.js:7)
   at HTMLAnchorElement.<anonymous> (bootstrap.min.js:7)
   at HTMLAnchorElement.dispatch (jquery.min.js:3)
   at HTMLAnchorElement.r.handle (jquery.min.js:3)
   at Object.trigger (jquery.min.js:3)
   at Object.simulate (jquery.min.js:3)
   at HTMLDocument.c (jquery.min.js:3)

Answer 1

As far as I have known, setting data-animation="false" to the html elements can avoid "quickly" hovering error.

Here is my solution, please check this if it helps.

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<section>
  <h3>Interactive demo</h3>
  <p>Using the Bootstrap v4.0.0-alpha.6</p>

  <!-- Tooltip -->
  <button id="query-button" type="button" class="btn btn-outline-info" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Analyse" data-trigger="hover" data-animation="false">
    <i class="fa fa-search" aria-hidden="true"></i>
  </button>

  <button id="next-button" type="button" class="btn btn-outline-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Previous" data-trigger="hover" data-animation="false">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
  </button>

  <button id="previous-button" type="button" class="btn btn-outline-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Next" data-trigger="hover" data-animation="false">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
  </button>

  <button id="download-button" type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Download CSV File" data-trigger="hover" data-animation="false">
    <i class="fa fa-download" aria-hidden="true"></i>
  </button>
</section>

Answer 2

There is already an issue for this bug on GitHub:
v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")

And as per that thread:

this is fixed on master that wasn't released yet. This fix will hit as part of beta 1