jquery - qTip2 在 Chrome 中的定位

Question

以下代码使用 jQuery qTip2 插件创建工具提示。它在 Firefox 中正常工作，但在 chrome 中，工具提示绑定到视口的左上角。在ie8中它根本不起作用，但假设这是一个不同的问题......

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

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

      });

这是一个显示行为的jsfiddle

Answer 1

似乎选项在 Chrome 中没有偏移，可能是因为它被视为文本字段的内侧。

您可以做的是使用 target: mouse 并调整 {mouse: false} 这更容易且有意义。或者你可以解决这个问题：

$("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
                    }                              
          });
});

​ 您可以根据您的字体大小调整值 14。也可能为了提高性能，您可以将 $(".dropDown select").offset().left 和 $(".dropDown select").offset().top 存储在每个函数之外的变量中。