javascript - 工具提示有时会保留在滑动 div 内元素的页面上

Question

我们正在为其中一个项目使用引导程序，并面临提供的工具提示插件问题。它实际上不是引导程序中的错误，而是在我们使用它的情况下产生了问题。

我们有一个进入内容 div 的滑动滑块。以及用于使用工具提示隐藏/显示效果的按钮。基于 jQuery UI 滑动的滑动效果。

问题是：

当我们点击隐藏侧边栏按钮，同时在幻灯片动画时将鼠标移出按钮悬停时，有时工具提示不会被隐藏，而是停留在页面上。

这也发生在显示侧边栏上。当它发生时，它看起来非常糟糕和错误。

我们如何解决这个问题？

score 20 · Accepted Answer

理查德在引导论坛上回答（https://github.com/r1ch0）

只需在单击按钮时手动隐藏工具提示，然后触发幻灯片动画。


$('#button').on('click', function () {
  $(this).tooltip('hide')
  $('#sidebar').slide() // replace with slide animation
})

发布在这里只是因为其他人可以找到它。

score 3 · Accepted Answer

我使用了 Krunal 贡献（+1 btw），这对我帮助很大，但并没有完全解决问题。
当我点击按钮时，工具提示消失了，但是当我的鼠标悬停它时又回来并再次卡住，直到我点击其他地方。

所以我发现工具提示在悬停时出现，同时也在聚焦元素时出现。
最后我写了这个：

$('button').on('click', function () {
    $(this).blur()
})

而且效果很好。
谢谢。

score 2 · Accepted Answer

在https://github.com/twitter/bootstrap/pull/4104上似乎有一个适当的解决方案（不涉及手动清理），希望很快就会发布。

score 1 · Accepted Answer

如果您使用的是引导工具提示，那么如何添加延迟选项：

jQuery('#example').popover(delay: { show: 100, hide: 100 })

如果工具提示类似于图像中的 alt 标签，则使用 jQuery 将其删除。

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery("img").removeAttr("alt");
});
</script>

4 回答 4