JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<a class="btn"  rel='popover' data-placement='bottom' data-original-title='&lt;b&gt;Requests&lt;/b&gt;' data-content='My content goes here'>one</a>
<a class="btn" rel='popover' data-placement='right' data-original-title='&lt;b&gt;Messages&lt;/b&gt;' data-content='My content goes here'>two</a>

CSS

body { padding: 100px; }

JavaScript

$(document).ready(function(){

    $('.btn').popover();

    $('.btn').on('click', function (e) {
        $('.btn').not(this).popover('hide');
    });
    
    
    $('body').on('click', function (e) {
    //did not click a popover toggle or popover
    console($(e.target));
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('.btn').not(this).popover('hide');
    }
});


});