jQuery UI Tooltip小部件的最大宽度

Question

我使用jQuery UI的新Tooltip，但是在设置提示框的最大宽度时遇到了麻烦。我猜想应该使用position来完成，但具体怎么做呢？

- sl3dg3

Answer 1

根据Senni的回答，我把以下内容添加到了一个单独的CSS文件中：

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

顺带一提：确保你的独立CSS文件在ui-css之后，否则它将没有效果。否则，你也可以使用!important标记。

- sl3dg3

---

作为一种替代方案，我更喜欢添加一个更具体的CSS规则，以便它将优先于jquery-ui.css规则，无论您链接样式表的顺序如何。如果您在body标签上有一个ID标记，只需执行#idOfBodyTag .ui-tooltip即可。 - Josh

!important 很重要。 - LauraNMS

无论加载顺序，“body div.ui-tooltip”似乎已经足够。 - But those new buttons though..

Answer 2

如果您订阅了工具提示的打开事件，您可以在代码中更新样式：

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

- KJR

---

这个很好用。谢谢。而且，这更好，因为您可以根据需要制作不同大小的工具提示。 - sdjuan

@sdjuan 谢谢！我一直在尝试使用“width”，但它却无法生效，即使“height”可以。不过，“max-width” 就解决了问题。 - nfriend21

不要使用那个！Jquery在调用open之前计算宽度和高度。因此，大小的更改将不会被注册。 - pknoe3lh

Answer 3

在脚本中：

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

在CSS中：

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

- AnViKo

---

这对我来说似乎是最好的答案。您不需要干扰jQuery UI的CSS，而且您可以为每个工具提示单独设置样式。谢谢。这帮助我意识到我不知道要设置哪个类/ID的样式，因为工具提示实际上并不在我的代码中，只在jQuery UI中。 - Michael K

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 样式

该类将默认使模态框宽度为 1200 像素，并在超出此范围时添加水平滚动条。

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

</style>

顺便提一下：通常不建议使用!important标签，但在这种情况下可以使用它来确保所需的CSS得到呈现。

- anataliocs

---

这不再是一个有效的解决方案。.html() 不能作为内容参数的一部分实现，因为 HTML 不再被支持。 - PseudoNinja

好的，html()函数用于填充工具提示内容，而不是样式，因此即使脚手架不存在，该技术仍然有效。 - Roger Kaplan

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

希望这会有所帮助！

- Gonza Oviedo

Answer 6

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

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

或者

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

- Senni

---

这个某种程度上不起作用，但是基于这个我添加了一些CSS（请看我的回答）。 - sl3dg3

Answer 7

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

- tonton polak

---

虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答这个问题的额外背景信息可以提高其长期价值。 - mickmackusa

Answer 8

宽度：210像素; //如果特定浏览器中无法使用fit-content 宽度：fit-content;

- Pablo Ramirez

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - Andy Hoffner