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

iq3niunx 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(148)

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

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>

这是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)

twitter-bootstrap

来源：https://stackoverflow.com/questions/45230333/getting-error-on-bootstrap-4-uncaught-error-tooltip-is-transitioning

2条答案

按热度按时间

cl25kdpy1#

根据我的理解，为HTML元素设置属性data-animation="false"可以防止快速悬停错误的发生。
这是我的解决方案，如果有帮助，请检查。

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

赞(0）回复(0）举报 2023-09-28

cnh2zyt32#

在GitHub上已经有这个bug的问题：
v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")
根据这个线程：
这是针对尚未发布的master的。此修复将作为beta1的一部分

赞(0）回复(0）举报 2023-09-28

我来回答

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

This Is My JavaScript|Bootstrap 4

这是Tooltip JavaScript

控制台出错

2条答案

相关问题

热门标签

最新问答