我使用 jQuery UI 的新工具提示,并且无法弄清楚如何设置工具提示的最大宽度。我想应该用position来完成,但是怎么做呢?
问问题
52044 次
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 回答