web-dev-qa-db-ja.com

調整Bootstrapツールチップの幅

幅の異なるテキストボックスがあるフォームでbootstrapツールチップバージョン3とJQueryを使用しています。ツールチップの幅を、その要素に応じて調整する方法があるかどうか疑問に思いました。つまり、要素の幅に達するまでツールチップのコンテンツを1行で表示したいのですが、ツールチップの幅が要素を超えると、次の行にコンテンツが自動的に表示されます。これは、=を使用して可能ですか。 bootstrapツールチップ？

 $('#myTextBox1').tooltip();
 $('#myTextBox2').tooltip();

HTML：

<input type="text" id="#myTextBox1" class="textBox1" data-placement="top" title="tooltip on first input to check if the width adjusts to the width of the text box!" />
<input type="text" id="#myTextBox2" class="textBox2" data-placement="top" title="tooltip on second input!" />

CSS：

    .textBox1 {
     width:200px;
     height:40px;
}

    .textBox2 {
     width:300px;
     height:40px;
}
jquerycsstwitter-bootstraptwitter-bootstrap-tooltip
6
user1527762

答えを探している将来のプログラマーのためにこれを投稿するのに遅すぎないことを願っています。このような質問があります。このリンクに移動します： Twitter Bootstrapのツールチップの幅と高さをどのように変更しますか？

そこにある答えの1つは非常に便利です。 @knobliが回答しました。回答をリンクする方法がわかりませんが、そのページにアクセスして投票していただければ幸いです。とにかく、ここにコピーします。

CSSの場合：

.tooltip-inner {
    max-width: 100% !important;
}

HTMLの場合：

<a href="#" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Insert Title">Insert Title</a>

data-container = "body"を追加するだけで、準備が整います。

16
Rei-chan

問題に対するあなたの全体的な戦略は正しいと思いますが、あなたは緊張感にとらわれています。簡単な調査の後、次の記事を提案します。

とはいえ、自動的に実行できるかどうかは完全にはわかりません。要素の幅を把握して計算する必要があります（ウィンドウのサイズを変更するとどうなりますか？）。

しかし、私のリンクはあなたが確かにそれを手動で行うことができることを示しています。したがって、考えられる解決策は、計画しているサイズごとに異なるCSSクラスまたはファイルを用意することです。完璧ではありませんが、機能します。

私が助けてくれたらいいのに！

0
Flame_Phoenix