JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="well">
<a href="#" class="btn btn-primary" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

<a class="btn bad">Bad button</a>
</div>

JavaScript

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

//first event handler for bad button
$('.bad').click(function () {
    alert("clicked");
});


$(document).on("click", function (e) {
    var $target = $(e.target),
        isPopover = $(e.target).is('[data-toggle=popover]'),
        inPopover = $(e.target).closest('.popover').length > 0
    
    //does absolutely nothing. Only wastes memory
    $('.bad').click(function () { 
        console.log('clicked');
        return false;
    });
    
    //hide only if clicked on button or inside popover
    if (!isPopover && !inPopover) $popover.popover('hide');
});