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

Question

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 - Bootstra

Answer 1

This works for me :

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

});

I was disabling save button dynamically then problem was.

Answer 2

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

Answer 3

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");

Answer 4

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>

Answer 5

Inside your document ready function use this

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

Answer 6

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...