如何自动关闭在单击并失去焦点或切换选项卡后可见的 Bootstrap Tooltip？

Question

我注意到了这种奇怪的工具提示行为。

如果我单击具有引导工具提示的链接，然后切换选项卡或最小化窗口，然后返回主窗口，即使鼠标未悬停在工具提示上，也会显示工具提示。

这是一个错误吗？还是正常行为？

http://jsfiddle.net/4nhzyvbL/1/

HTML 代码

<a data-original-title="Download" target="_blank" href="http://www.google.com/" 
   data-toggle="tooltip" title=""> click me and then come back to check me </a>

CSS 代码

@import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

JS代码

$(function (){$('[data-toggle="tooltip"]').tooltip({});});

如何使工具提示在用户返回主窗口时不显示？即自动隐藏。

Answer 1

这是预期的行为。从 Bootstrap 文档 来看，

hover focus

是显示工具提示的默认触发器。因此，当您返回窗口时，链接将获得焦点并且工具提示将显示。您可以通过在元素上设置自己的触发器来禁用它：

data-trigger="hover"

或者在 jQuery 初始化器中：

$('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
});

例如： http://jsfiddle.net/4nhzyvbL/4/

Answer 2

这在 firefox 中有效，没有在其他浏览器中测试。

当选项卡失去焦点时隐藏工具提示。

document.addEventListener('visibilitychange', function() {
  $('[data-toggle="tooltip"]').tooltip('hide')
})

参考

演示

浏览器支持--（IE 10、Edge 12、firefox 38、chrome 31、safari 8、opera 31、ios safari 7.1、android 4.4.4、chrome for android 44及以上版本）

Answer 3

我遇到了鼠标离开后工具提示仍然可见的问题，因此我在单击时将其删除了

  document.addEventListener("click", event => {
    var tooltip = event.target.closest(".tooltip");
    if(tooltip) {
      tooltip.remove();
    }
  })