Thursday, January 26, 2012

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 = $(,
                $closeBtn = $('.popover .close-btn');


                    title:function () {
                        return "Well, title!"
                    content:function () {
                        return that.getContent();


            $'click', function(e){


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.


  1. This is pretty late, but I'm pretty certain your problem was that Chrome doesn't let certain elements (like divs and anchor tags) have focus unless they have a tabindex (weird, right?). If you give the elements tabindex='0' they won't show up in your taborder, but it will allow you to use the 'click' trigger.

    I'm doing a rambling, semi-coherent writeup on my blog that should be up sometime soon if you feel like doing some followup!

    1. tabindex='0'
      You've made my day! Thanks a lot :)

  2. Hi ebrynne,

    Yep, this post is century old already and I'm pretty sure many things has changed since then. I will put an follow up in the blog once you have your contents ready. Thanks :)