在Bootstrap 4上出现错误:"未捕获的错误:工具提示正在转换"

Question

我正在使用Bootstrap 4,在我当前的网站上,我正在使用Tooltip.我的JS格式正确,但有时我在Console中出错.

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

这是Tooltip 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元素可以避免"快速"悬停错误.

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

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

GitHub 上已经存在此错误的问题：
v4.0.0-alpha.6 - 激活工具提示会破坏模式（卡住“转换”）

根据该线程：

这是在尚未发布的 master 上修复的。此修复将作为 beta 1 的一部分进行修复