2

次のコードは、jQueryqTip2プラグインを使用してツールチップを作成します。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です

4

1 に答える 1

0

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を調整できます。また、おそらくパフォーマンスを向上させるために、$（"。dropDownselect"）。offset（）。leftと$（ "。dropDownselect"）。offset（）。topを各関数の外部の変数に格納できます。

于 2012-07-14T02:43:10.853 に答える