JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<h3>Live demo</h3>
        <div class="bs-docs-example" style="padding-bottom: 24px;">
          <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

JavaScript

var isVisible = false;
                var clickedAway = false;

                $('.btn-danger').popover({
                        html: true,
                        trigger: 'manual'
                    }).click(function(e) {
                        $(this).popover('show');
                        clickedAway = false
                        isVisible = true
                        e.preventDefault()
                    });

                $(document).click(function(e) {
                  if(isVisible & clickedAway)
                  {
                    $('.btn-danger').popover('hide')
                    isVisible = clickedAway = false
                  }
                  else
                  {
                    clickedAway = true
                  }
                });