qTip2 positioning in Chrome

Question

The following code creates a tooltip using the jQuery qTip2 plugin. It works correctly in firefox, but in chrome the tooltips are bound to the top left of the viewport. In ie8 it doesn't work at all, but assuming that's a different issue....

$("option").qtip({
            content: {
                text: function() {

                    return $(this).attr('title');
                            }
                },
            position: {
                my: 'right center',
                at: 'left center',
                target: this,
                viewport: $(window)
            },
            show: {
                solo:true
            }

      });

Here's a jsfiddle showing the behaviour

Answer 1

It seems option has no offset in Chrome, perhaps because it is treated like the inner side of a text field.

what could you do is either use target: mouse and adjust {mouse: false} which is easier and makes sense. Or you could do this work around:

$("option").each(function(){
              origin=this;
              $(origin).qtip({
                    content: {
                        text: function() {                                               
                            return $(this).attr('title');
                                    }
                        },
                    position: {
                        my: 'right center',
                        at: 'left center',
                        target: [$(".dropDown select").offset().left,$(".dropDown select").offset().top+14+parseInt($(".dropDown select option").index($(origin))*14)],//"mouse",//Causing problems in chrome? 
                        viewport: $(window),
                        adjust: {mouse:false}
                    },
                    show: {
                        solo:true
                    }                              
          });
});

​ You can adjust the value 14 according to your font size. also perhaps for improving the performance , you can store $(".dropDown select").offset().left and $(".dropDown select").offset().top in a variable outside the each function.