viewportオプション
ツールチップ（tooltip.js）におけるviewportオプションは、ツールチップを表示する領域を指定するオプション。
指定した要素の領域をはみ出さないように、ツールチップを表示する。
属性値一覧表
初期設定値は、{ selector: 'body', padding: 0 }である。
| 属性値 | 説明 |
|---|---|
| 文字列 |
セレクター。 例： #sample
|
| オブジェクト |
セレクターや余白を、オブジェクトとしてまとめて指定できる。 例： { "selector": "#sample", "padding": 2 }
|
data-viewport属性に指定
ツールチップを呼び出す要素に、data-viewport属性を追加し、ツールチップの内容を指定する。
サンプル
ソースコード
HTML
<div id="sample2viewport"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="サンプル・ボタンのツールチップ">サンプル・ボタン</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-html="true" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="サンプル・ボタン<br>の<br>ツールチップ">サンプル・ボタン</button> <button type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="bottom" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="サンプル・ボタンのツールチップ">サンプル・ボタン</button> <br><br><br><br><br><br> <button type="button" class="btn btn-default" data-toggle="tooltip" data-viewport='{ "selector": "#sample2viewport", "padding": 2 }' title="サンプル・ボタンのツールチップ">サンプル・ボタン</button> </div>
CSS
#sample2viewport {
background-color: #b6ff00;
}
JavaScript
$('[data-toggle="tooltip"]').tooltip();
JavaScriptにおいてviewportオプションを指定
サンプル
ソースコード
HTML
<div id="sample3viewport"> <button type="button" id="sample3tooltip1" class="btn btn-default" title="サンプル・ボタンのツールチップ">サンプル・ボタン</button> <button type="button" id="sample3tooltip2" class="btn btn-default" title="サンプル・ボタン<br>の<br>ツールチップ">サンプル・ボタン</button> <button type="button" id="sample3tooltip3" class="btn btn-default pull-right" title="サンプル・ボタンのツールチップ">サンプル・ボタン</button> <br><br><br><br><br><br> <button type="button" id="sample3tooltip4" class="btn btn-default" title="サンプル・ボタンのツールチップ">サンプル・ボタン</button> </div>
CSS
#sample3viewport {
background-color: #b6ff00;
}
JavaScript
$('#sample3tooltip1').tooltip(
{
placement: 'bottom',
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
$('#sample3tooltip2').tooltip(
{
placement: 'right',
html: true,
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
$('#sample3tooltip3').tooltip(
{
placement: 'bottom',
viewport: { selector: '#sample3viewport', padding: 2 }
}
);
$('#sample3tooltip4').tooltip(
{
viewport: { selector: '#sample3viewport', padding: 2 }
}
);