Bootstrap's tooltip doesn't disappear after button click & mouseleave

JavascriptTwitter BootstrapTooltip

Javascript Problem Overview

I have a problem with bootstrap's tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - Bootstrap's tooltip and if I'm clicking on the buttons, I see the same problem. Is there any solution to fix this? Just tried in latest FF, IE.

Javascript Solutions

Solution 1 - Javascript

This is because trigger is not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.

So all you have to do is to define trigger as 'hover' only. Below the same example you have linked to without persisting tooltips after a button is clicked :

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

the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/

Solution 2 - Javascript

I know over a year old, but I couldn't get this to work with any examples here. I've had to use the following:

$('[rel="tooltip"]').on('click', function () {
	$(this).tooltip('hide')
})

This also shows the tooltip again upon hover.

Solution 3 - Javascript

Hi i have little solution for this issue. When other solutions doesn't work just try this one:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

This is solution for drag and drop too. So i hope this help someone :)

Solution 4 - Javascript

In my case the issue was reproduced only in Internet Explorer: no matter which element(input, div etc...) has tooltip- if clicked- tooltip remains shown.

found some solutions on web that recommends .hide() that tooltip on elements Click event- but it is bad idea- hovering back to the same element - keeps it hidden... in my case

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

made all the magic!!!- where .myToolTippedElement is the element that have a tooltip ofCourse...

Solution 5 - Javascript

in angular 7 with bootstrap 4 and jquery I found this and it works fine. I used dispose because it destroys does not hide the tooltip.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

Solution 6 - Javascript

This is also achievable in the HTML by adding the following:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Solution 7 - Javascript

Working Solution

$(document).on("click",function()
    {
    setTimeout(function()
    {
    
  $('[data-toggle="tooltip"]').tooltip('hide');
  
},500);    // Hides tooltip in 500 milliseconds
    });

Solution 8 - Javascript

David's answer above helped to fix my problem. I had both hover and click event on the button. Firefox on MAC did behave as I wanted. That is, show tooltip when hover, do not show tooltip for click. On other browsers and OS, When I click, the tooltip appear and stay as show. Even if i move the mouse to other buttons for hover. This is what I had:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true});

This is the fix:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'});

Solution 9 - Javascript

Also you can add:

onclick="this.blur()"

Solution 10 - Javascript

With Bootstrap 5

Tooltips are now initialized in plain/vanilla Javascript. Because I only saw JQuery options here, let me post the VERY SIMPLE and straightforward way in plain JS :

//Initialize bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map( function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
  trigger : 'hover'
  });
});

You only need to add the "{trigger : 'hover'}" object as an option of bootstrap.Tooltip(element, options).

Source: https://getbootstrap.com/docs/5.1/components/tooltips/#usage

Solution 11 - Javascript

Try using rel="tooltip" instead of data-toggle="tooltip" which worked in my case. I was using data-toggle="tooltip" and also set the trigger condition as hover which didn't work in my case. When I changed my data selector, it worked.

HTML Code:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

JS Code //Tooltip $('.btn').tooltip({ trigger: 'hover' });

This will definitely remove the stuck tooltip.

Solution 12 - Javascript

The way I fixed this issue was by removing the tooltip in the click event function using the following code:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

Solution 13 - Javascript

You can also use below method to hide tooltip on mouseleave, As below:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

Solution 14 - Javascript

Also you can use this way for old versions because the accepted answer didn't worked for me and I wrote this code for my self and its work well.

$(document).on('mousedown', "[aria-describedby]", function() {
	$("[aria-describedby]").tooltip('hide');
});

Solution 15 - Javascript

This solution worked for me.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

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

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

fiddle

I tried most of the solutions given in previous answers, but none of them worked for me.

Solution 16 - Javascript

My problem is in DataTable. Below code works for me.

columnDefs: [
    {
        targets: 0, data: "id", 
        render: function (data, type, full, meta) {
            return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>';
        }
    }
 ],
drawCallback: function() {
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="tooltip"]').on('click', function () {
        $(this).tooltip('hide');
    });
}

Solution 17 - Javascript

I had this issue with Bootstrap 4 on iPhone with Safari.

On PC/Desktop, the tooltip is working great. But when looking on an iPhone with iOS 14, after click / tap on a button, the tooltip remained visible. Also when hiding the layer.

For me, adding this code solved the issue on iPhone:

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

jQuery('[data-toggle="tooltip"]').on("click", function () {
	$(this).tooltip("hide");
});

Solution 18 - Javascript

To me, works only when I put this code. P.S.: I'm using Bootstrap 4.


$("body").tooltip({
	selector: '[data-toggle=tooltip]',
	trigger: 'hover'
}).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
	$('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('hide');
});

Solution 19 - Javascript

I'm using bootstrap tooltip in cycle.js and none of the above worked for me.

I had to do this:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

Solution 20 - Javascript

This works for me :

$(document).ready(function() {
   $('#save').tooltip({
	        trigger : 'hover'
	    }) ;

});

I was disabling save button dynamically then problem was.

Solution 21 - Javascript

In my case for this was the fix:

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

I wasn't obeying this rule from Bootstrap docs: > Tooltips must be hidden before their corresponding elements have been removed from the DOM.

Solution 22 - Javascript

If someone want's to setup a tooltip which will show for some time after click, here is how I did:

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

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

Solution 23 - Javascript

Using a forced blur() has the potention to reduce the user experience. I wouldn't do that. I found that removing the "data-original-title" as well as removing the attributes "data-toggle" and "title" worked for me.

	$(id).tooltip('hide');
	$(id).removeAttr("data-toggle");
	$(id).removeAttr("data-original-title");
	$(id).removeAttr("title");

Solution 24 - Javascript

Using delegation to make it ajax friendly,

// if you're not using turbolinks, then you can remove this parent wrapper
$(document).on('turbolinks:load'), function() {  
  // enable tooltip with delegation to allow ajax pages to keep tooltip enabled
  $('body').tooltip({
    select: "[data-toggle='tooltip']"
  });

  // remove old tooltip from sticking on the page when calling ajax with turbolinks
  $('body').on('click', "[data-toggle='tooltip']", function() {
    $(this).tooltip('dispose');
  });
});
Categories
Recommended Javascript Solutions
Recommended Twitter Bootstrap Solutions
Recommended Tooltip Solutions

Previous Solution:

How do I force Maven to use my local repository rather than going out to remote repos to retrieve artifacts?

MavenRepositoryMaven 3Artifacts

Next Solution:

ES6 getter/setter with arrow function

Ecmascript 6Babeljs

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSilentCryView Question on Stackoverflow
Solution 1 - JavascriptdavidkonradView Answer on Stackoverflow
Solution 2 - JavascriptNitaiView Answer on Stackoverflow
Solution 3 - JavascriptNienormalny_View Answer on Stackoverflow
Solution 4 - JavascriptKamornik ColaView Answer on Stackoverflow
Solution 5 - JavascriptspecView Answer on Stackoverflow
Solution 6 - JavascriptcsharpsqlView Answer on Stackoverflow
Solution 7 - JavascriptAlphaView Answer on Stackoverflow
Solution 8 - Javascriptuser1322977View Answer on Stackoverflow
Solution 9 - JavascriptSergey KoshkinView Answer on Stackoverflow
Solution 10 - JavascriptVincent TallonView Answer on Stackoverflow
Solution 11 - JavascriptJestino SamView Answer on Stackoverflow
Solution 12 - JavascriptsoroxisView Answer on Stackoverflow
Solution 13 - JavascriptHanuman Sahay View Answer on Stackoverflow
Solution 14 - Javascriptuser12914956View Answer on Stackoverflow
Solution 15 - JavascriptطلحةView Answer on Stackoverflow
Solution 16 - JavascriptWHYView Answer on Stackoverflow
Solution 17 - JavascriptAl-Noor LadhaniView Answer on Stackoverflow
Solution 18 - JavascriptKlauder DiasView Answer on Stackoverflow
Solution 19 - JavascriptBrian C.View Answer on Stackoverflow
Solution 20 - JavascriptDevendra SingraulView Answer on Stackoverflow
Solution 21 - JavascriptGabi LView Answer on Stackoverflow
Solution 22 - JavascriptFawaz AhmedView Answer on Stackoverflow
Solution 23 - JavascriptGregory BolognaView Answer on Stackoverflow
Solution 24 - JavascriptkonyakView Answer on Stackoverflow