ブートストラップツールチッププラグイン
ツールチッププラグイン
ツールチッププラグインは、ユーザーが要素の上にマウスポインターを移動したときに表示される小さなポップアップボックスです。
ヒント： プラグインは、個別に（Bootstrapの個別の「tooltip.js」ファイルを使用して）含めることも、一度に（「bootstrap.js」または「bootstrap.min.js」を使用して）含めることもできます。
ツールチップを作成する方法
ツールチップを作成するには、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>
ヒント：data-placement値が ""の属性を使用することもできますauto。これにより、ブラウザーがツールチップの位置を決定できるようになります。たとえば、値が「auto left」の場合、ツールチップは可能な場合は左側に表示され、そうでない場合は右側に表示されます。
完全なブートストラップツールチップリファレンス
すべてのツールチップオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSツールチップリファレンスにアクセスしてください。