Bootstrap's tooltip doesn't disappear afte

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Inside your document ready function use this

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

Answer 6

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.