Twitter bootstrap popover doesn't work with click event

We were playing with the Twitter bootstrap javascript library lately,  and found out the popover doesn't play well with 'click' event in Chrome (FF works though).  I tried to find solution on the web, but didn't find what we want or the solution doesn't work. Hopefully this post might provide a solution that can help others.

The way we get around this is to wrap the popover call inside a callback which listen to click.

        // ... probably in your initialize function
        $('my-selector').bind('click', this.showPopover);

        // ... somewhere inside an object
        showPopover: function(e){
            var $popTrigger = $(e.target),
                $closeBtn = $('.popover .close-btn');

            $closeBtn.trigger("click");

            (function(that){
                $popTrigger.popover({
                    html:true,
                    placement:'below',
                    offset:8,
                    trigger:'manual',
                    title:function () {
                        return "Well, title!"
                    },
                    content:function () {
                        return that.getContent();
                    }
                });
            })(this);

            $popTrigger.popover("show");

            $closeBtn.live('click', function(e){
                $popTrigger.popover("hide");
                e.preventDefault();
            });

            e.preventDefault();
        }

You can enhance the code by checking if the elements already have desired events attached, so you don't need to trigger that twice.  And if you are designing a one page app, you may need to add function to  hide/remove the popover when the page context is changing.