qTip 动态宽度答案

【问题标题】：qTip Dynamic WidthqTip 动态宽度
【发布时间】：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
});

【讨论】：