JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<button id="popoverButton" type="button" class="btn btn-default" data-placement="bottom">
  Show Popover
</button>

<div id="popoverContentContainer" style="display: none;">
    <div id="popoverContent">
        <button id="closeButton">Close Me</button>
    </div>
</div>

JavaScript

$("#popoverButton").popover({
    animation: false,
    html : true,
    content: function () {
        return $('#popoverContent');
    }
}).on('hide.bs.popover', function () {
            // Move the content back to the containing div before it gets destroyed
            $("#popoverContentContainer").append($("#popoverContent"));
        });

$('#closeButton').click( function() {
    // Hide the popover
    $('#popoverButton').popover('hide')   
});