Bootstrap 2.3.2 Modal ToolTip

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<p>Click to launch modal dialog:</p>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>


<div id="myModal" class="modal hide fade">
    
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    
    <div class="modal-body"> 
        
        <a class="btn pop"  rel="popover" href="#" data-original-title="A Title" data-container="body"
        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.  Super, duper long.  There is even more text that makes it longer.  Why do I need so much text in my modal?  It's so long that the top gets cut off by the modal header.  How do I fix this?">
            Click to toggle popover
         </a>
        
    </div>
    
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>



<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Post: <a href='http://stackoverflow.com/q/18882359/1366033'>Bootstrap - Popover gets cut off by modal header</a><br/>
    Find documentation: <a href='http://getbootstrap.com/2.3.2/base-css.html'>Get Bootstrap 2.3.2</a><br/>
    Fork This Fiddle Here: <a href='http://jsfiddle.net/KyleMit/xamHD'>Bootstrap 2.3.2 Skeleton</a><br/>
    External JS File: <a href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'>bootstrap.min.js</a><br/>
    External Style Sheet: <a...

CSS

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

JavaScript

$('a[rel=popover]').popover();