Bootstrap - Popover is disabled by modal header

Question

I use popover inside a modal window in Bootstrap 2.3.1. The problem is that popover displays UNDER for the modal div header.

Here you can see an example / fiddle of this problem: ("Run demo mode", then "Click to switch popover") http://jsfiddle.net/cZ6Cr/2/

Relevant Code:

<a class="btn" data-content="And here some amazing content. It very engaging. right? And another thing about this is a that it 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 changed the script created by cvrebert from this thread on GitHub https://github.com/twbs/bootstrap/issues/5014

Answer 1

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

OR

 .modal-body{overflow:visible;} 

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

Answer 2

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

CSS

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

Live demo in jsFiddle

What would look like this: