Question

我目前正在将qTip jQuery插件与完整日历结合使用。这两个都很棒。但是，我目前陷入了困境。

有时，我的qTip内容需要大量数据。当qTip工具提示的宽度和高度固定时，会被剪裁。有什么办法可以让宽度和高度变得动态吗？

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

Answer 1

如果您不想修改qtip源，只需在css中添加

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

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

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

Answer 2

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

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

Answer 3

我碰到了同样的问题。

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

Answer 4

使用您自己的班级：

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

现在在max-width的CSS中设置.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了解即时演示。

q提示动态宽度

4 个答案: