[解決済み] Bootstrapのツールチップの幅を調整する
2022-02-26 18:09:15
質問
私はブートストラップツールチップバージョン3とJQueryを、幅の異なるテキストボックスを持つ私のフォームで使用しています。つまり、要素の幅に達するまで、ツールチップの内容を一行で表示させたいと思っています。ツールチップの幅が、それがある要素を超えたら、それは自動的に次の行にコンテンツを表示する必要があります。これは、bootstrap tooltipsを使用して可能でしょうか?
$('#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;
}
解決方法は?
答えを探している未来のプログラマーのために、この投稿が遅すぎないことを願っています。このような質問があります。このリンクにアクセスしてください。 Twitter Bootstrapのツールチップの幅と高さを変更するにはどうすればよいですか?
そこにある回答のひとつがとても便利です。それは @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"。 で、準備完了です。
関連
-
[解決済み】 .autocomplete is not a function Error
-
[解決済み] jQueryでページスクロールをプログラム的に無効にする方法
-
[解決済み] BootstrapがUncaught Errorを投げる:BootstrapのJavaScriptはjQueryを必要とする【終了】。
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQueryのセレクタにワイルドカードを使用した場合
-
[解決済み】カルーセルで画像を中央に配置する方法
-
[解決済み] カルーセルで画像を中央に配置する方法
-
[解決済み] jQueryでリンクを無効化する
-
[解決済み] jQueryの遅延が機能しない
-
[解決済み] jQuery ValidateプラグインでaddMethodを使用する
-
[解決済み] 無効な JSON プリミティブ ERROR
-
[解決済み] jQueryでページスクロールをプログラム的に無効にする方法
-
[解決済み] Vimeoのコントロールを非表示にする方法
-
[解決済み] Twitter Bootstrapのツールチップに複数行を持たせるには?