jQuery UI的工具提示部件的宽度(Width of jQuery UI Tooltip wid

我使用jQuery UI的新工具提示和遇到问题，首先要弄清楚如何设置提示的最大宽度。 我想它应该的位置来完成，但是怎么样？

Answer 1:

基于塞恩的答复，我添加以下到一个单独的CSS文件：

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

阿里纳斯：确保UI的CSS 后您的单独的CSS如下，否则就没有效果。 否则，你也可以使用!important -标记。

Answer 2:

如果你订阅工具提示的开放活动，您可以更新代码风格：

$(".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类，您可以指定使用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呈现。

Answer 5:

正如指出的jQuery UI的API ，你能做的最好是覆盖类UI的工具提示和UI的工具提示，内容是这样的：

.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 browsers
width: fit-content;
}

文章来源: Width of jQuery UI Tooltip widget