2016-03-28 18 views
1

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

$('#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; 
} 
+0

テキストボックスのマークアップの例を挙げることができますか? – Angelique

答えて

0

私は問題のためのあなたの全体的な戦略は正しいですが、あなたはtenchicalityで立ち往生していると思います。私はあなたがそれを自動的に行うことができれば全くわからない、これは言っ

:迅速な研究の後、私は以下の記事を示唆してあなたがしたいです要素の幅を知り、計算する必要があります(ウィンドウのサイズを変更するとどうなりますか?)。

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

私は助けました!

3

将来のプログラマーが回答を探すために投稿するのが遅くないことを願っています。このような質問があります。このリンク先へ移動:How do you change the width and height of Twitter Bootstrap's tooltips?

答えの1つは非常に便利です。それは@knobliによって答えられました。私は答えをリンクする方法を知らないが、私はあなたがそのページに行って投票することを願っています。とにかく、ここでコピーします。 CSSについては

:HTMLの場合

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

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

ジャストデータコンテナ= "身体"を追加し、あなたが移動する準備が整いました。

+0

素晴らしいCSSチップ。 Vue Bootstrapのツールチップにも使用できます。 – Fractal

関連する問題