JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div style="text-align: center;">
    <ul style="margin: 0 auto;">
        <li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a>

        </li>
        <!-- Popover 1 hidden content -->
        <div id="hiddenpopbadge1" style="display: none">
             <h3>Content</h3>

        </div>
        <li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">2</a>

        </li>
        <!-- Popover 2 hidden content -->
        <div id="hiddenpopbadge2" style="display: none">
             <h3>Content 2</h3>

        </div>
        <li><a class="popOver badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">3</a>

        </li>
        <!-- Popover 3 hidden content -->
        <div id="hiddenpopbadge3" style="display: none">
             <h3>Content 3</h3>

        </div>
    </ul>
</div>

CSS

ul {
    list-style: none;
}

JavaScript

$(document).ready(function () {
    // Has the popover been hidden once before?
    var hiddenOnce = false;
    $(function () {
        $("#popbadge1").popover('show');
        // Now it has
        shownOnce = true;
    });

    // New function:
    $(function () {
        // When anything is clicked...
        $('*').click(function (e) {
            // Except popbadge1 & if popover has not been hidden once before
            if (e.target.attr != 'popbadge1' && hiddenOnce === false) {
                // Hide the popover
                $("#popbadge1").popover('hide');
                // Set as hidden once before
                hiddenOnce = true;
            }
        });
    });
    $(function() {
  $("#popbadge1").focus();
});

    $("#popbadge1").popover({
        html: true,
        content: function () {
            return $('#hiddenpopbadge1').html();
        }
    });
    $("#popbadge2").popover({
        html: true,
        content: function () {
            return $('#hiddenpopbadge2').html();
        }
    });
    $("#popbadge3").popover({
        html: true,
        content: function () {
            return $('#hiddenpopbadge3').html();
        }
    });
});