Bootstrap - Popover gets cut off by modal header

Question

I am using a popover inside a modal window in Bootstrap 2.3.1. The problem is that the popover displays UNDER the modal-header div.

You can see an example / fiddle of this problem here: ("Launch Demo Modal", then "Click to toggle popover") http://jsfiddle.net/cZ6Cr/2/

The relevant code is:

<a class="btn" data-content="And here's some amazing content.  It's very engaging.     right? And another thing about this is a that it's really long.  When I say long I mean really, really long." 
rel="popover" 
href="#"
data-original-title="A Title">
Click to toggle popover
</a>

*I modified a fiddle created by cvrebert from this thread on GitHub https://github.com/twbs/bootstrap/issues/5014

Answer 1

It proves a little tricky to dynamically resize your modal container based on tooltip size.
However, you can take your tooltip out of the HTML flow by adding position: fixed.

CSS:

.popover {
    z-index: 9999;
    position: fixed;
}

Live Demo in jsFiddle

Which will look likes this:

Answer 2

Fixed by using: .modal-body{overflow-y:visible;}

OR

.modal-body{overflow:visible;}

Fiddle: http://jsfiddle.net/cZ6Cr/4/