JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<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">
        <p>
            <a href="#" rel="tooltip" title="first tooltip">
                hover over me
            </a>
        </p>
        <p>
            <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.  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?" rel="popover" href="#"
                data-original-title="A Title">
                    Click to toggle popover
            </a>
        </p>
        <p class="show-z-index">hover for z-indices:</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

<p>Try This:</p>
<p>
    <a href="#" rel="tooltip" title="first tooltip">
        hover over me
    </a>
</p>
<p>
    <a class="btn"
        data-content="And here's some amazing content.
        It's very engaging. right?" rel="popover" href="#"
        data-original-title="A Title">
            Click to toggle popover
    </a>
</p>

<p>And then the same in a Modal:</p>

<p>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
</p>
<p class="show-z-index">hover for z-indices:</p>

JavaScript

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


// shows element css-classes and z-index of all tooltips, popovers and modals
// only for demonstration
showZIndex = function() {
    var zIndices = new Array();
    $('div.tooltip, div.popover, div.modal').each( function() {
        zIndices.push($(this).attr('class') + '; z-index: ' + $(this).css('z-index'));
    });
    var html = zIndices.join('<br>');
    $('.show-z-index').html(html);
};

$('body').on('hover', 'a[rel=tooltip], a[rel=popover]', showZIndex)