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