jQuery UIのツールチップの配置に関する問題

Question

jQuery UIのツールチップの配置に関する問題があります。私はjQuery UIを使用しない方が好きですが、私が取り組んでいるプロジェクトではすでにこれを使用しています。私の好みのオプションqTip2を統合するのではなく、使いたいと思っています。

ツールチップが表示されると、垂直スクロールバーが表示されます。私はターゲットの上にツールチップを配置しています。この問題を除いて、必要なときにツールチップを中央に配置しています。

$(function() { 
$(document).tooltip({ 
show: false, 
    hide: false, 
    position: { 
    my: "center bottom-20", 
    at: "center top", 
    using: function(position, feedback) { 
     $(this).css(position); 
     $("<div>") 
     .addClass("arrow") 
     .addClass(feedback.vertical) 
     .addClass(feedback.horizontal) 
     .appendTo(this); 
    } 
    } 
}); 
}); 

私は、ツールチップが一番上に配置されていることがわかります：-600px私は、スクロールバーが表示されていると仮定します。

私はツールチップの位置を変更/削除しようとしましたが、何の効果もありませんでした。私は問題を特定するためにCSSの部分を削除しようとしましたが、それはパディング（任意）または高さ（最小、最大または固定）に関連しているようです。

パディングと高さを削除すると問題が解決しますが、明らかにツールチップにはちょっと見た目が残っています...スキニー。私は問題が何であるか、それを回避する方法を工夫したいので、ツールチップをスタイルすることができます。

私の現在のCSS（私が見ることができる高さと詰め物を含む）は次のとおりです（矢印が設定されているスタイルもありますが、問題は発生していません）：

.ui-tooltip { 
    z-index:10; 
    width:150px; 
    padding:10px; 
    min-height:20px; 
    max-width:100%; 
    font-size:0.875em; 
    text-align:center; 
    border-radius: 20px; 
    color:#707070; 
    background:#fffdc2 url(../img/fade.png) repeat-x; 
    font-family: 'Droid Sans', sans-serif; 
    text-shadow: 1px 1px #ffffff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #e1e0aa;} 

私はjQueryのUIはan open issue about connectorsを持って知っているので、私は任意の位置の設定なしでそれをテストしてみたし、それはこれに何ら差は行われません。

私はqtipを持っていないか、それ以外のものが含まれていないので、これは数回述べたthis issueを見たことがあります。

私はJS fiddle hereを設定しました。

私は何か助けやアドバイスをいただきありがとうございます。

ありがとうございます！

Answer 1

あなたが問題としていることを正しく理解している場合は、div（ "#ui-tooltip-XX"）がドキュメントの本文にposition: relativeで追加されているため、垂直スクロールバーが追加されます。本文のscrollHeightプロパティ（スクロールバーが表示される） これは残りのHTMLと互換性があります（私はテストすることができません）。このヒントは、ツールヒントのposition属性をabsolute（コンテナの全体の高さには寄与しません）に設定することで回避できます。

// Add this in your CSS 
.ui-tooltip, .arrow:after { 
    position: absolute; 
    .... 

（あなたのページのHTMLの残りの部分に基づいて、のadditonalの変更が必要になることがあります。）

参照してください、また、持っている私のアプリのために、このshort demo。

Answer 2

（ツール入れ子になったjQueryタブ内のjQuery DataTableのセルのヒント）では、 'position：absolute'を設定するだけでは不十分でした.-作成後に最初の画面の上端と左端にツールチップを配置する必要がありました。

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px; 
}