2015-09-25 123 views
5

我注意到这个奇怪的工具提示行为。如何自动关闭Bootstrap Tooltip,点击并失去焦点或切换标签页后,它会自动显示?

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

这是一个错误?或正常行为?

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

我怎样才能使工具提示,当用户回来不显示主要风流?即自动隐藏。

+0

在你提供的小提琴中,tooltip正在关闭鼠标out.can你重现了这个问题? –

+0

@JSantosh点击链接,然后切换标签页。你会得到这个问题。 – AMB

回答

6

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

data-trigger="hover" 

还是在jQuery的初始化器:

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

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

+0

这很好,但现在我想如果它的默认行为,那么它保持,因为有一个原因。所以生病要坚持默认行为了,谢谢 – AMB

+1

我发现我需要做到这一点,以及点击时关闭工具提示。 ('click',function(){$(this).tooltip('hide');});''' – yuvilio

1

这是工作在Firefox,没”在其他浏览器中进行测试。

当标签失去焦点时隐藏工具提示。

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

Reference

Demo

Browsers Support - (IE 10,边缘12,火狐38,铬31,野生8,歌剧31,IOS SAFARI 7.1,机器人4.4.4,铬为android 44及以上版本)