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