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

Question

我添加了一个引导工具提示，但是，有时（并且仅有时）当我将鼠标悬停在图像上以显示工具提示时，图像只是闪烁而不实际显示工具提示，如下所示：

这是我的 HTML：

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

查询：

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

这假定工具提示放置将是“顶部”。

我希望这可以帮助某人。

Answer 2

我会尝试将 JS 代码包装在 document.ready 中，如下所示：

$( document ).ready(function() {
$('.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});
});