イベント Events
ツールチップのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$( セレクター ).on( イベント, function () {
// 処理
} );
セレクターでツールチップを選択。
イベントに指定できるのは、show.bs.tooltip、shown.bs.tooltip、hide.bs.tooltip、hidden.bs.tooltip。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| show.bs.tooltip |
ツールチップを表示するshowメソッドを呼び出した時のイベント。 |
| shown.bs.tooltip |
ツールチップが表示された時のイベント。 |
| hide.bs.tooltip |
ツールチップを非表示にするhideメソッドを呼び出した時のイベント。 |
| hidden.bs.tooltip |
ツールチップが非表示になった時のイベント。 |
サンプル
サンプル
show.bs.tooltip:
shown.bs.tooltip:
hide.bs.tooltip:
hidden.bs.tooltip:
ソースコード
HTML
<p>show.bs.tooltip: <span id="showBsTooltip"></span></p> <p>shown.bs.tooltip: <span id="shownBsTooltip"></span></p> <p>hide.bs.tooltip: <span id="hideBsTooltip"></span></p> <p>hidden.bs.tooltip: <span id="hiddenBsTooltip"></span></p> <p> <button type="button" id="sampleTooltip" class="btn btn-default" data-toggle="tooltip" title="ツールチップ">サンプル・ボタン</button> </p>
JavaScript
$(function () {
$('[data-toggle="tooltip"]').tooltip();
$('#sampleTooltip').on('show.bs.tooltip', function () {
$('#showBsTooltip').text("showメソッドを呼び出しましたね。");
$('#hideBsTooltip').text("");
});
$('#sampleTooltip').on('shown.bs.tooltip', function () {
$('#shownBsTooltip').text("ツールチップを表示しました。");
$('#hiddenBsTooltip').text("");
});
$('#sampleTooltip').on('hide.bs.tooltip', function () {
$('#hideBsTooltip').text("hideメソッドを呼び出しましたね。");
$('#showBsTooltip').text("");
});
$('#sampleTooltip').on('hidden.bs.tooltip', function () {
$('#hiddenBsTooltip').text("ツールチップを非表示にしました。");
$('#shownBsTooltip').text("");
});
});