JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<ol>
    <li>Click
        <button class="togglepop btn">Toggle Popover</button>. Popover appears.</li>
    <li>Click
        <button class="hidepop btn">Hide popover</button>. Popver does <strong>not</strong> disappear.</li>
</ol>

CSS

li {
    margin-bottom: 20px;
}

JavaScript

$('.togglepop').popover({
    animation: false,
    trigger: 'manual',
    content: 'foo'
}).click(function () {
    $(this).popover('toggle');
});

$('.hidepop').click(function () {
    $('.togglepop').popover('hide');
});