Question

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

Answer 1

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

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

旁注：确保单独的CSS在 ui-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。

Answer 5

正如jQuery UI api所指出的，你能做的最好就是以这种方式覆盖 ui-tooltip 和 ui-tooltip-content 这两个类：< / p>

.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;
}

jQuery UI Tooltip小部件的宽度

8 个答案: