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.

Answer 2

As Andre mentioned, the mouseleave event isn't fired, so the tooltip doesn't get removed.

To do the same thing as hiding the tooltip, you can simply trigger the mouseleave event manually ( Updated JSFiddle ).

$(this).trigger('mouseleave');

While you haven't explained what happens when you click the element in your case, I would guess it's because the element was removed and the mouseleave event is never triggered. In this case, you should write an event listener and trigger the mouseleave element manually:

$('#anchor').click(function(){
    $(this).trigger('mouseleave');
}