dynamic - qTipダイナミック幅

Question

現在、フル カレンダーと組み合わせて qTip jQuery プラグインを使用しています。これらは両方ともうまく機能します。しかし、私は現在問題で立ち往生しています。

場合によっては、qTip コンテンツのデータが多すぎることがあります。これは、qTip ツールチップの幅と高さが固定されているため、切り取られます。幅と高さを動的にする方法はありますか?

最大幅は 350 であることがわかりましたが、これは私の要件には十分ではありません。

Answer 1

qtipソースを変更したくない場合は、これをcssに追加するだけです

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

この css ハックを使用すると、ヒントは内部に記述したコンテンツに適応します。

固定サイズを配置する場合は、none必要なサイズに変更します (例: 500px)。

Answer 2

独自のクラスを使用します。

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

これで CSS に設定max-widthされます (接頭辞は特定性によるものです)。ここに私のデモがありますが、必要なものを選択してください：.qtip.my-qtip.qtipnone

/* .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を参照してください。