web-dev-qa-db-ja.com

jQueryUIツールチップの配置の問題

JQueryUIのツールチップに位置の問題があります。 jQuery UIを使用したくないのですが、私が取り組んでいるプロジェクトではすでにjQuery UIを使用しているため、好みのオプションであるqTip2を統合するのではなく、jQueryUIを使用してみてください。

ツールチップが表示されると、垂直スクロールバーが表示されます。ツールチップをターゲットの中央に配置していますが、この問題を除いて、希望どおりです。

$(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には コネクタに関する未解決の問題 があることを知っているので、位置設定なしでテストしましたが、これに違いはありませんでした。

私は この問題 を数回言及しましたが、qTipやその他のものが含まれていないため、関連性がありませんでした。

ここではJSフィドル を設定しました。

助けやアドバイスをいただければ幸いです。

ありがとう！

jquerycssjquery-uijquery-ui-tooltip
11
Amy

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

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

（ページの残りのHTMLに基づいて、追加の変更が必要になる場合があります。）

また、これ短いデモも参照してください。

21
gkalpak

私のアプリ（ネストされたjQueryタブ内のjQuery DataTableのセルにツールチップがある）の場合、「position：absolute」を設定するだけでは不十分でした-ツールチップは配置されるだけなので、画面上の最初の上下の位置も指定する必要がありました作成後：

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px;
}
2
John - Not A Number