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",
    content: function () {
        return $('#popoverContent').html();
    }
});


var isVisible = false;
var clickedAway = false;

$('.popoverThis').popover({
    html: true,
    trigger: 'manual'
}).click(function (e) {
    $(this).popover('show');
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>');
    clickedAway = false
    isVisible = true
    e.preventDefault()
});

$(document).click(function (e) {
    if (isVisible & clickedAway) {
        $('.popoverThis').popover('hide')
        isVisible = clickedAway = false
    } else {
        clickedAway = true
    }
});