Tooltip remains sometimes on page on element inside sliding div

css, javascript, jquery, twitter-bootstrap

Solution

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.

Problem

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?

Original source