qTip動態寬度

Question

我目前使用qTip jQuery插件與全日曆結合使用。這兩個作品很好。但是，我目前陷入了一個問題。

有時，我的qTip內容有很多數據。當qTip工具提示的寬度和高度固定時，這會被剪裁。有什麼辦法可以使寬度和高度動態？

我發現最大寬度是350，但這不足以滿足我的要求。

Answer 1

我碰到同樣的問題。

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

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: none !important; } 

用這個CSS黑客技巧將適應你寫在裏面的內容。

如果你想把一個固定大小的none更改爲你需要的大小（例如：500px）。

Answer 4

使用自己的類：

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

現在在你的CSS .qtip.my-qtip設置max-width（該.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。