javascriptjquerytwitter-bootstrap

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

i have noticed this weird tool-tip behavior .

if i click on the link having bootstrap tool-tip and then switch tabs or minimize window and then come back to main window the Tooltip gets shown even though the mouse is not hovering it.

is this a bug ? 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 tool-tip to not show when user comes back to main window ? i.e. hide automatically .

Solution

  • This is expected behaviour. From the Bootstrap documentation, hover focus are the default triggers to show the tooltip. So when you go back to the window, the link gets focus and the tooltip will show. you can disable it by setting your own trigger on the element:

    data-trigger="hover"

    Or in the jQuery initialiser:

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

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