web-dev-qa-db-ja.com

jQuery UI Tooltipウィジェットの幅

JQuery UIの新しい Tooltip を使用していますが、ツールチップの最大幅を設定する方法を見つけるのに問題があります。 positionで行うべきだと思いますが、どうやって？

jquery-uijquery-ui-tooltip
20
sl3dg3

Sennの回答に基づいて、次の内容を別のCSSファイルに追加しました。

div.ui-tooltip {
    max-width: 400px;
}

補足：別のCSSがafter ui-cssに続くことを確認してください。そうしないと効果がありません。それ以外の場合は、!important - マーカー。

45
sl3dg3

Tooltipのopenイベントをサブスクライブする場合、コードでスタイルを更新できます。

$(".selector").tooltip({
    open: function (event, ui) {
        ui.tooltip.css("max-width", "400px");
    }
});
30
KJR

スクリプト内：

$(Elm).tooltip({tooltipClass: "my-tooltip-styling" });

cSSで：

.my-tooltip-styling {
      max-width: 600px;
}
11
AnViKo

JQuery UI CSSクラスを直接変更またはオーバーライドする代わりに、tooltipClassパラメーターを使用して追加のCSSクラスを指定できます。

ツールチップの初期化

  $(function() {
    $( document ).tooltip({
      items: "tr.dataRow",
      tooltipClass: "toolTipDetails",  //This param here is used to define the extra style class 
      content: function() {
        var element = $( this );

            var details = j$("#test").clone();
            return details.html();

      }
    });
  });

次に、そのスタイルクラスを作成します。 jQuery UI CSSファイルの後にこのCSSファイルをインポートする必要があります。

CSSスタイルの例

このクラスは、デフォルトでモーダルの幅を1200ピクセルにし、それ以上のコンテンツがある場合は水平スクロールを追加します。

<style> 
  .toolTipDetails {
    width:  1200px;
    max-width: 1200px;
    overflow:auto;
  } 

</style>

サイドノート：通常、!importantタグですが、この場合、目的のCSSがレンダリングされるようにするために使用できます。

5
anataliocs

jQuery UI api で指摘されているように、できる最善の方法は、クラスui-tooltipおよびui-tooltip-contentこの方法：

.ui-tooltip
{
    /* tooltip container box */
    max-width: your value !important;
}
.ui-tooltip-content
{
    /* tooltip content */
    max-width: your value !important;
}

お役に立てれば！

3
Gonza Oviedo

たぶん、jsでこのような幅を設定できます

$("#IDOfToolTip").attr("style", "max-width:30px");

または

$("#IDOfToolTip").css("max-width", "30px");
2
Senni
 div.ui-tooltip {
 width：210px; //特定のブラウザでfit-contentが機能しない場合
 width：fit-content; 
}
0
Pablo Ramirez
  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }
0
tonton polak