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.
