Tooltip remains sometimes on page on element inside sliding div

Question

We are using a bootstrap for one of the project and facing an issue with tooltip plugin provided. Its actually not a bug in bootstrap but an issue is created with the situation we're using it.

We have a sliding slidebar that goes inside content div. And buttons for hiding / showing effect with a tooltip. The sliding effect based on jQuery UI slide.

The issue is:

When we click on hide sidebar button, and at the same time moves mouse out of button hover at the time of slide animation, then some times the tooltip doesn't gets hidden, and stays over there on the page.

This happens also on show sidebar too. And when it happens it looks very bad and buggy.

How can we fix this?

Answer 1

Answered on bootstrap forum by Richard ( https://github.com/r1ch0)

Just manually hide the tooltip when you click the button, before you trigger the slide animation.

$('#button').on('click', function () {
  $(this).tooltip('hide')
  $('#sidebar').slide() // replace with slide animation
})

Copied from: https://github.com/twitter/bootstrap/issues/3446

Posted here just because someone else can find it.

Answer 2

I used Krunal contribution (+1 btw), that helped a lot me but did not completly solved the issue.
The tooltip disappears when I clic on the button, but comes back and gets stuck again when my mouse hovers it, until I click somewhere else.

So i figured out that the tooltip appears while hovering, and also while focusing an element.
Finally i wrote this :

$('button').on('click', function () {
    $(this).blur()
})

And it works well.
Thanks.