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

您可以使用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呈现预期的内容。

于 2014-06-02T20:12:51.340 回答
3

正如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;
}

希望这可以帮助！

于 2013-07-24T16:05:35.087 回答
2

也许你可以在js中设置这样的宽度

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

或者

$("#IDOfToolTip").css("max-width", "30px");
于 2012-10-18T14:21:16.410 回答
0 
  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }
于 2016-07-21T15:12:23.340 回答
0 
div.ui-工具提示{
宽度：210px；//如果适合内容在特定浏览器中不起作用
宽度：适合内容；
}
于 2019-05-10T12:51:07.070 回答