如何关闭引导工具提示自动获得可见后，单击和失去焦点或切换选项卡

How to close Bootstrap Tooltip automatically which gets visible after clicking and losing focus or switching tabs?

本文关键字：失去 单击 焦点 选项 工具提示 何关闭      更新时间：2023-09-26

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

如果我点击链接引导工具提示，然后切换选项卡或最小化窗口，然后回到主窗口的工具提示显示，即使鼠标没有悬停它。

这是一个bug吗?还是正常行为?

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

HTML CODE 
<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({});});

如何使工具提示不显示当用户回到主窗口?即自动隐藏。

这是预期的行为。在Bootstrap文档中，hover focus是显示工具提示的默认触发器。当你回到窗口时，链接得到焦点，工具提示会显示出来。您可以通过在元素上设置自己的触发器来禁用它:

data-trigger="hover"

或者在jQuery初始化器中:

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

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

这是在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及以上版本)

相关文章：