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 e back to main window the Tooltip gets shown even though the mouse is not hovering it.

is this a bug ? or normal behavior ?

/

HTML CODE

<a data-original-title="Download" target="_blank" href="/" 
   data-toggle="tooltip" title=""> click me and then e back to check me </a>

CSS CODE

@import url(".2.0/cerulean/bootstrap.min.css");
@import url(".2.0/css/bootstrap-theme.min.css");
@import url(".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 es back to main window ? i.e. hide automatically .

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 e 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/4nhzyvbL/1/

HTML CODE

<a data-original-title="Download" target="_blank" href="http://www.google./" 
   data-toggle="tooltip" title=""> click me and then e back to check me </a>

CSS CODE

@import url("http://maxcdn.bootstrapcdn./bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn./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 es back to main window ? i.e. hide automatically .

• javascript
• jquery
• twitter-bootstrap

• In the fiddle you provided, tooltip is closing on mouse out.can you reproduce the issue ? – J Santosh Commented Sep 25, 2015 at 13:09
• @JSantosh click on the link , then switch tabs. you will get the issue. – user1642018 Commented Sep 25, 2015 at 13:17

3 Answers 3

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/4nhzyvbL/4/

this is working in firefox , didn't test in other browsers.

Hide the tool tip when the tab looses focus.

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

Reference

Demo

Browsers Support -- (IE 10, Edge 12, firefox 38, chrome 31,safari 8, opera 31, ios safari 7.1, android 4.4.4,chrome for android 44 and above versions)

I had the issue that the tooltips remained visible after mouse leave so I removed them on click

  document.addEventListener("click", event => {
    var tooltip = event.target.closest(".tooltip");
    if(tooltip) {
      tooltip.remove();
    }
  })