[解決済み] Twitter Bootstrapのポップオーバーをページ上の任意の場所（他の場所）からクリックして閉じるにはどうすればよいですか？

質問

現在、Twitter Bootstrapでポップオーバーを使用していますが、このように開始されます。

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

ご覧の通り、これらは手動で起動され、.popup-marker（これは背景画像を持つdivです）をクリックするとポップオーバーが切り替わるようになっています。これは素晴らしい機能ですが、ページ上の他の場所をクリックしてポップオーバーを閉じることもできるようにしたいのです (ただし、ポップオーバーそのものではありません!)。

次のようなことを含め、いろいろと試してみたのですが、結果が出ません。

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

ポップオーバーをクリックすると閉じますが、ポップオーバー自体をクリックすると閉じないようにするにはどうしたらよいですか？

解決方法は？

ポップオーバーは常に1つしか表示できないと仮定すると、ポップオーバーが表示されているときにフラグで印をつけ、そのときだけポップオーバーを隠すことができます。

イベントリスナーをドキュメントボディに設定すると、'popup-marker' でマークされた要素をクリックしたときにイベントリスナーが起動するようになります。そのため stopPropagation() をイベントオブジェクトに追加します。そして、ポップオーバーそのものをクリックするときにも同じトリックを適用します。

以下は、これを実現するJavaScriptのコードです。jQuery >= 1.7を使用しています。

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

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

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

唯一の注意点は、2つのポップオーバーを同時に開くことができなくなることです。しかし、それはユーザーを混乱させることになると思います :-)