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中没有偏移，可能是因为它被视为文本字段的内侧。

你能做的就是使用目标：鼠标并调整{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。

qTip2在Chrome中的定位

1 个答案: