Bootstrap tooltip hidden by parent div

Question

I'm using Bootstrap tooltips on my web app and they were being cut off by it's parent div.

To solve this I added data-container="body"

<a href="/some-path" title="Show tool tip" data-container="body" data-toggle="tooltip">Hello</a>

This solved the problem but a new problem came with it.

When I click on the anchor and navigate the tooltip won't disappear.

Has anyone come across this? Is there a simple way to solve this?

EDIT - JSFiddle similar to my problem http://jsfiddle.net/m9AX5/5/ except in my case the parent div doesnt get removed.

Answer 1

It happens because the mouseleave isn't detected.

One solution is to hide tooltip on click action:

$('#button').on('click', function () {
  $(this).tooltip('hide')
})

Example: http://jsfiddle.net/m9AX5/6/

Hope it helps.