1. ホーム
  2. jquery

[解決済み] 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"。 で、準備完了です。