javascript – 如何自动关闭Bootstrap Tooltip,点击并失去焦点或切换标签后可见？

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

如果我点击具有bootstrap工具提示的链接然后切换标签或最小化窗口然后回到主窗口即使鼠标没有悬停它也会显示工具提示.

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

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

当用户回到主窗口时,如何使工具提示不显示？即自动隐藏.

解决方法

这是预期的行为.从 Bootstrap documentation开始,悬停焦点是显示工具提示的默认触发器.因此,当您返回窗口时,链接将获得焦点并显示工具提示.您可以通过在元素上设置自己的触发器来禁用它：

data-trigger="hover"

或者在jQuery初始化器中：

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

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

原文地址：https://www.jb51.cc/js/157814.html