How to close Bootstrap tooltip automatically, which becomes visible after clicking and losing focus or switching tabs?

Question

I noticed this strange behavior of the tool.

if I click on a link containing a hint for bootstrap and then switch tabs or minimize the window and then return to the main window when the tooltip is displayed, even if the mouse does not freeze.

This is mistake? or normal behavior?

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 CODE

 @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 code

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

How can I make a hint so as not to show when the user returns to the main window? those. hide automatically.

Answer 1

This is the expected behavior. From the hover focus Download Documentation , these are the default triggers that display a tooltip. Therefore, when you return to the window, the link receives focus, and a tooltip will show. you can disable it by setting your own trigger for an element:

 data-trigger="hover" 

Or in the jQuery initializer:

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

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

Answer 2

this works in firefox, not tested in other browsers.

Hide the tip of the tool when the tab loses focus.

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

Link

Demo

Browser support - (IE 10, Edge 12, firefox 38, chrome 31, safari 8, opera 31, ios safari 7.1, android 4.4.4, chrome for android version 44 and higher)