jQuery UI Tooltip小部件的宽度

Question

我使用jQuery UI的新工具提示,并且无法弄清楚如何设置工具提示的最大宽度.我想应该用位置来完成,但是如何？

Answer 1

根据Senn的回复,我在一个单独的CSS文件中添加了以下内容:

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

旁注:确保在ui-css 后跟随单独的CSS ,否则将无效.否则你也可以使用!important- 标记.

Answer 2

如果您订阅了Tooltip的open事件,则可以在代码中更新样式:

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

Answer 3

在脚本中:

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

在css中:

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

Answer 4

您可以使用tooltipClass参数指定其他CSS类,而不是直接修改或覆盖jQuery UI 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呈现预期.