Bootstrap popover open/close on click

by niki4810

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span class="popup-marker" data-content="content" data-original-title="title">xxxxxxx</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

JavaScript

var isVisible = false;
var clickedAway = false;

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

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