JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<h3>Live demo</h3>

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>

<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>


<br><br><br><hr>
<h5>Instructions</h5>

<ol>
    <li>Click Button <pre>Popover works!</pre></li>
    <li>Click Button Again <pre>Popover Flashes?!! Why doesn't it simply dismiss?</pre></li>
    <li>Click Button Again <pre>Popover is really messed up now... flashing again!</pre></li>
    <li>Click Outside Button and Repeat Steps 1-3 <pre>Clicking outside the button resets everything.  But this shouldn't be necessary.</pre></li>
</ol>

JavaScript

$('#popoverId').popover({
    html: true,
    title: 'Popover Title<a class="close" href="#");">&times;</a>',
    content: $('#popoverContent').html(),
});

$('#popoverId').click(function (e) {
    e.stopPropagation();
});

$(document).click(function (e) {
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
        $('#popoverId').popover('hide');
    }
});