javascript - Bootstrap 工具提示在悬停时闪烁

Question

我已经添加了一个 Bootstrap 工具提示，但是，有时(并且仅有时)当我将鼠标悬停在图像上以显示工具提示时，图像只是闪烁而没有实际显示工具提示，如下所示:

这是我的 HTML:

<div class="up"></div>
<div class="down"></div>

JQuery:

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
  $('.up').tooltip({title: '<b>Up</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});
  $('.down').tooltip({title: '<b>Down</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});
</script>

怎么了？

Answer 1

我确实遇到过这个问题。

对我来说，问题在于工具提示箭头与实际图像重叠，用户必须将鼠标悬停在该图像上才能触发工具提示的显示 - 因此会闪烁。

我的解决方案是添加一个带有填充的 css 类，然后将该 css 添加到图像中。这将确保图像周围有填充，并且工具提示将不再与图像重叠。

这是我的 CSS 类:

/* this is the padding applied to icon hyper-links to prevent the tooltip flicker issue */
.no_flicker_padding {
    padding-top: 7px;
}

这是我的 html 代码(css 类已添加到超链接以防止闪烁效果):

<a id="id_form_display_toggle" href="javascript:toggleDiv('id_toggle_professional_development_form_details');" rel="tooltip" title="{% trans 'Click to toggle the form details.' %}" trigger="hover" class="no_flicker_padding">

    <i id="id_professional_development_form_toggle" class="fa fa-angle-double-up icon_size26"></i>

    <i id="id_professional_development_form_toggle" class="fa fa-angle-double-down icon_size26"></i>

</a>

这假设工具提示放置在“顶部”。

我希望这可以帮助某人。