Bootstrap's tooltip doesn't disappear after button click & mouseleave
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/
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.
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 :)