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

Question

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 .

Erleneerlewine

In the fiddle you provided, tooltip is closing on mouse out.can you reproduce the issue ? – Yippee

@JSantosh click on the link , then switch tabs. you will get the issue. – Erleneerlewine

Answer 1

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/

Yoke

this works great, but now i am thinking if its a default behavior then its kept that because there is a reason. so ill be sticking to default behavior now., thanks – Erleneerlewine

I found i needed to do this as well as close the tooltip when clicked as well. $('[data-toggle="tooltip"]').on('click', function(){$(this).tooltip('hide');}); – Villein

Answer 2

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)

Yippee

Answer 3

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

Flaxen