24

jQuery UI の新しいツールチップを使用していますが、ツールチップの最大幅を設定する方法がわかりません。positionで行う必要があると思いますが、どうすればよいですか?

4

8 に答える 8

49

Senni の返信に基づいて、別の CSS ファイルに以下を追加しました。

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

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

于 2012-10-18T14:57:31.540 に答える
33

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

$(".selector").tooltip({
    open: function (event, ui) {
        ui.tooltip.css("max-width", "400px");
    }
});
于 2013-03-25T18:11:52.953 に答える
11

スクリプト内:

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

CSSで：

.my-tooltip-styling {
      max-width: 600px;
}
于 2013-07-26T08:50:26.580 に答える
5

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 スタイルの例

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

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

</style>

補足: 通常、!importantタグの使用は推奨されませんが、この場合、意図したものが確実にCSSレンダリングされるようにするために使用できます。

于 2014-06-02T20:12:51.340 に答える
2

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

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

また

$("#IDOfToolTip").css("max-width", "30px");
于 2012-10-18T14:21:16.410 に答える