JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="bs-example tooltip-demo">
    <div class="bs-example-tooltips">
               <button type="button" class="popovercustom btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="You clicked first button" data-original-title="" title="">Button1</button>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <button type="button" class="popovercustom btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="You clicked second button" data-original-title="" title="">Button2</button>
    </div>
</div>

JavaScript

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
    $('.popovercustom').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});