containerオプション
ツールチップ（tooltip.js）におけるcontainerオプションは、通常は指定する必要はない。ボタン・グループ内やインプット・グループ内でツールチップを呼び出す場合に必要なことがある。
属性値一覧表
| 属性値 | 説明 |
|---|---|
| 文字列 |
ツールチップを追加する要素。bodyなど。
|
| false |
指定なし。 初期設定値である。 |
data-container属性に指定
ボタン・グループ内のツールチップを呼び出す要素に、data-container属性を追加し、bodyを指定する。
サンプル
data-container属性を指定した場合
data-container属性を指定しない場合
ソースコード
HTML
<p><code>data-container</code>属性を指定した場合</p> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-container="body" title="ツールチップ">左</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-container="body" title="ツールチップ">中央</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-container="body" title="ツールチップ">右</button> </div> <hr> <p><code>data-container</code>属性を指定しない場合</p> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-toggle="tooltip" title="ツールチップ">左</button> <button type="button" class="btn btn-default" data-toggle="tooltip" title="ツールチップ">中央</button> <button type="button" class="btn btn-default" data-toggle="tooltip" title="ツールチップ">右</button> </div>
JavaScript
$('[data-toggle="tooltip"]').tooltip();
JavaScriptにおいてcontainerオプションを指定
サンプル
containerオプションを指定した場合
containerオプションを指定しない場合
ソースコード
HTML
<p><code>data-container</code>属性を指定した場合</p> <div id="sample3tooltip1" class="btn-group" role="group"> <button type="button" class="btn btn-default" title="ツールチップ">左</button> <button type="button" class="btn btn-default" title="ツールチップ">中央</button> <button type="button" class="btn btn-default" title="ツールチップ">右</button> </div> <hr> <p><code>data-container</code>属性を指定しない場合</p> <div id="sample3tooltip2" class="btn-group" role="group"> <button type="button" class="btn btn-default" title="ツールチップ">左</button> <button type="button" class="btn btn-default" title="ツールチップ">中央</button> <button type="button" class="btn btn-default" title="ツールチップ">右</button> </div>
JavaScript
$('#sample3tooltip1 button').tooltip(
{
container: 'body'
}
);
$('#sample3tooltip2 button').tooltip(
{
container: false
}
);