jQuery UI Tooltip widget的最大宽度。

Question

我使用jQuery UI的新 工具提示 遇到了麻烦，不知道如何设置工具提示的最大宽度。我想应该用 位置但怎么做呢？

Answer 1

基于 森尼的答复我在一个单独的CSS文件中添加了以下内容。

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

附注：请确保你的独立CSS遵循 之后 ui-css，否则就没有效果。否则你也可以使用 !important - 标记。

Answer 2

如果你订阅了Tooltip的打开事件，你可以在代码中更新样式。

$(".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

不要直接修改或覆盖jQuery UI的CSS类，你可以使用以下方法指定一个额外的CSS类 tooltipClass 参数。

工具提示初始化

  $(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，如果有更多的内容超过了1200px，就会增加一个水平滚动。

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

</style>

旁注：一般不建议使用 !important 标签，但在这种情况下，它可以用来确保预期的 CSS 是呈现的。

Answer 5

正如《公约》所指出的 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;
}

希望能帮到你！

Answer 6

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

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

或

$("#IDOfToolTip").css("max-width", "30px");

Answer 7

  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }

Answer 8

div.ui-tooltip{width: 210px; /if fit-content not worked in specifics browserswidth: fit-content;}。