placementオプション
ツールチップ（tooltip.js）におけるplacementオプションは、ツールチップの表示位置を指定する場合に使用するオプション。
属性値一覧表
| 属性値 | 説明 |
|---|---|
top |
ツールチップを上に表示。 |
right |
ツールチップを右に表示。 |
bottom |
ツールチップを下に表示。 |
left |
ツールチップを左に表示。 |
auto |
ポップオーバーの位置を自動調性する。auto leftとすると、左に表示できる場合は、左に表示する。
|
data-placement属性に指定
ツールチップを呼び出す要素に、data-placement属性を追加し、top（上）、right（右）、bottom（下）、left（左）の何れかを指定する。
サンプル
｜ ｜ ｜ ｜
ソースコード
HTML
<p> <button type="button" class="btn btn-default" data-toggle="tooltip" title="ツールチップ（デフォルト）">サンプル・ボタン デフォルト</button> ｜ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="ツールチップ（上）">サンプル・ボタン 上</button> ｜ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="ツールチップ（右）">サンプル・ボタン 右</button> ｜ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="ツールチップ（下）">サンプル・ボタン 下</button> ｜ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="ツールチップ（左）">サンプル・ボタン 左</button> </p>
JavaScript
$('[data-toggle="tooltip"]').tooltip();
JavaScriptにおいてplacementオプションを指定
サンプル
｜ ｜ ｜ ｜
ソースコード
HTML
<p> <button type="button" id="sample3tooltip1" class="btn btn-default" title="ツールチップ（デフォルト）">サンプル・ボタン デフォルト</button> ｜ <button type="button" id="sample3tooltip2" class="btn btn-default" title="ツールチップ（上）">サンプル・ボタン 上</button> ｜ <button type="button" id="sample3tooltip3" class="btn btn-default" title="ツールチップ（右）">サンプル・ボタン 右</button> ｜ <button type="button" id="sample3tooltip4" class="btn btn-default" title="ツールチップ（下）">サンプル・ボタン 下</button> ｜ <button type="button" id="sample3tooltip5" class="btn btn-default" title="ツールチップ（左）">サンプル・ボタン 左</button> </p>
JavaScript
$('#sample3tooltip1').tooltip();
$('#sample3tooltip2').tooltip(
{
placement: 'top'
}
);
$('#sample3tooltip3').tooltip(
{
placement: 'right'
}
);
$('#sample3tooltip4').tooltip(
{
placement: 'bottom'
}
);
$('#sample3tooltip5').tooltip(
{
placement: 'left'
}
);