bootstrap Popover with dynamic close

bootstrap Popover with dynamic close

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css">
<div class="container">
    <div class="row-fluid span12">
        <span class="popup-marker btn"  data-original-title="title">Click for Popover</span>
<div id="cnt" class="hide">CONTENT OF POPOVER <input type="text"></div>
</div>
</div>

CSS

body{margin:20px}

JavaScript

var isVisible = false;
var clickedAway = false;

$('.popup-marker').popover({
        html: true,
        trigger: 'manual',
      content: function() {
      return $('#cnt').html();
    }
    }).click(function(e) {
        $(this).popover('show');
        clickedAway = false
        isVisible = true
        e.preventDefault()
            $('.popover').bind('click',function() {
                clickedAway = false
                //alert('popover has been clicked!');
            });
    });

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