qTip动态宽度

Question

我目前正在将qTip jQuery插件与完整日历结合使用。这两种方法都很好用。然而，我现在被困在一个问题上。

有时，我的qTip内容有很多数据。当qTip工具提示的宽度和高度固定时，会将其剪裁掉。有什么方法可以让宽度和高度动态化吗？

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

Answer 1

如果您不想修改qtip源代码，只需在css中添加以下内容

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

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

如果您想放置一个固定的大小，请将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中，您可以更改最大宽度：

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