qTip 动态宽度

Posted 2023-03-06

【中文标题】qTip 动态宽度

【英文标题】：qTip Dynamic Width

【发布时间】：2012-09-22 06:09:59

【问题描述】：

我目前正在结合使用 qTip jQuery 插件和完整日历。这两个都很好用。但是，我目前陷入了一个问题。

有时，我的 qTip 内容包含大量数据。由于 qTip 工具提示的宽度和高度是固定的，这会被剪掉。有什么办法可以使宽度和高度动态化？

我发现最大宽度是 350，但这不足以满足我的要求。

【参考方案1】：

如果您不想修改 qtip 源，只需将其添加到您的 css 中

.qtip  max-width: none !important; 

有了这个 css hack，提示会适应你在里面写的内容。

如果您想设置固定大小，请将none 更改为您需要的大小（例如：500px）。

【参考方案2】：

使用你自己的类：

$('#tip-wide').qtip(
  content: 
    text: "some very wide tooltip text"
  ,
  style: 
    classes: 'my-qtip'
  
);

现在在你的 CSS 中设置 max-width 到 .qtip.my-qtip （.qtip 前缀是由于 specificity）。我在这里的演示有none，但你可以选择你需要的：

/* .my-qtip was enough for me,
   but .qtip.my-qtip is more specific,
   and hence will override .qtip's value */
.qtip.my-qtip 
  max-width: none;

查看jsfiddle 进行现场演示。

【参考方案3】：

我所做的是创建自己的类/样式。

在 html 页面中

jQuery("#tooltip").qtip( 
    content:     
         text : "tooltip", 
         title: text: "Row Information", button: 'Close'
    , 
    style: classes: "MyQtip",
    show: solo: true,
    hide: false
);

在我的 CSS 中，我有

.MyQtip max-width: 1000px

【讨论】：

我发现这不起作用，因为 .qtip 样式将应用于 .MyQtip 样式，覆盖最大宽度。我不得不做.MyQtip max-width: 1000px !important;

【参考方案4】：

我遇到了同样的问题。

在 qtip.css 中，你可以改变 max-width ：

.qtip
    max-width: 460px;

无论何时你想使用它：

var widthValue = '280px';
if ( someothercondition == true )  widthValue = '480px';     

jQuery("#tooltip").qtip( 
    content:    
        text : "tooltip", 
        title: 
            text: "Row Information",
            button: 'Close'
        
    , 
    style: 
        width: widthValue 
    ,
    show:
        solo: true
    ,
    hide: false
);