ブートストラップ4ツールチップ
ブートストラップ4ツールチップ
ツールチップコンポーネントは、ユーザーが要素の上にマウスポインタを移動したときに表示される小さなポップアップボックスです。
ツールチップを作成する方法
ツールチップを作成するには、data-toggle="tooltip"
属性を要素に追加します。
この属性を使用してtitle、ツールチップ内に表示するテキストを指定します。
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
注：ツールチップはjQueryで初期化する必要があります。指定された要素を選択してtooltip()メソッドを呼び出します。
次のコードは、ドキュメント内のすべてのツールチップを有効にします。
例
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
ポジショニングツールチップ
デフォルトでは、ツールチップは要素の上に表示されます。
この属性を使用してdata-placement、要素の上部、下部、左側、または右側のツールチップの位置を設定します。
例
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
完全なブートストラップツールチップリファレンス
すべてのツールチップオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSツールチップリファレンスにアクセスしてください。