Bootstrap tooltip hidden by parent div

Question

I use Bootstrap tooltips in my web application and they have been trimmed by the parent div.

To solve this problem, 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 arose.

When I click on the snap and move, the tooltip does not disappear.

Has anyone come across this? Is there an easy way to solve this problem?

EDIT - JSFiddle is similar to my http://jsfiddle.net/m9AX5/5/ problem, except that the parent div is not deleted.

Answer 1

This is because the mouse is not detected.

One solution is to hide the hint when pressed:

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

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

Hope this helps.

Answer 2

As Andre noted, the mouseleave event does not fire, so the tooltip is not deleted.

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

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

Until you explained what happens when you click an element in your case, I would guess it because the element was deleted and the mouseleave event never fired. In this case, you should write an event listener and start the mouseleave element manually:

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