jsFiddle: http://jsfiddle.net/kAYyR/

Screenshot:

Here's what works:

1. Open popover on button click


2. Close popover on click outside popover


3. Close popover on click of .close button

BUT... I cannot get the popover to close when you click the original button again. Instead the popover flashes off and on again.

Duplicate it yourself here.

How can I accomplish this?

HTML:

<button id=popoverId class=popoverThis btn btn-large btn-danger>Click to toggle popover</button>

<div id=popoverContent class=hide>This <em>rich</em> <pre>html</pre> content goes inside popover</div>

JS:

$('#popoverId').popover({

    html: true,

    title: Popover Title,

    content: function () {

        return $('#popoverContent').html();

    }

});





var isVisible = false;

var clickedAway = false;



$('.popoverThis').popover({

    html: true,

    trigger: 'manual'

}).click(function (e) {

    $(this).popover('show');

    $('.popover-content').append('<a class=close style=position: absolute; top: 0; right: 6px;>&times;</a>');

    clickedAway = false

    isVisible = true

    e.preventDefault()

});



$(document).click(function (e) {

    if (isVisible & clickedAway) {

        $('.popoverThis').popover('hide')

        isVisible = clickedAway = false

    } else {

        clickedAway = true

    }

});