在Bootstrap 4上出现错误：“未捕获的错误：工具提示正在转换”

Question

我正在使用Bootstrap 4，在我当前的网站上，我正在使用工具提示。我的JS格式正确，但有时我在控制台中出错。

这是我的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>

这是工具提示Javascript

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

这是控制台中的错误

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

据我所知，将data-animation="false"设置为html元素可以避免 ＆＃34;快速＆＃34; 悬停错误。

这是我的解决方案，如果有帮助，请检查一下。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

GitHub上存在此错误的问题：
v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")

根据那个帖子：

  

这是固定在尚未发布的主人身上。此修复程序将作为beta 1

的一部分