5

我目前正在将 qTip jQuery 插件与 Full Calendar 结合使用。这两个都很好用。但是，我目前陷入了一个问题。

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

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

4

4 回答 4

15

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

.qtip { max-width: none !important; }

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

如果您想放置固定尺寸，请将其更改为none您需要的尺寸（例如：500px）。

于 2016-04-19T15:06:36.593 回答
6

我所做的是创建自己的课程/风格。

在 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}
于 2014-11-30T19:31:05.150 回答
1

我遇到了同样的问题。

在 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
});
于 2013-08-05T17:45:36.660 回答
0

使用你自己的类：

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

现在在你的 CSS 中设置max-width（.qtip.my-qtip前缀.qtip是由于特殊性）。我的演示在这里有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。

于 2017-03-15T04:29:18.723 回答