Btukfyl

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.

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

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 :)

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.

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

Also you can add:

onclick="this.blur()"

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

}

This works for me :

$(document).ready(function() {

   $('#save').tooltip({

            trigger : 'hover'

        }) ;



});

I was disabling save button dynamically then problem was.

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

});

Inside your document ready function use this

 $(document).ready(function(){

            $('[data-toggle="tooltip"]').tooltip({

               trigger : 'hover'

            });

    });

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.

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

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

jQuery("body").on("mouseleave", ".has-tooltip", function(){

    jQuery(this).blur();

});