ツールチップ

ツールチッププラグイン

ツールチッププラグインは、ユーザーがマウスポインタを要素の上に移動すると表示される小さなポップアップボックスです。

ヒント: プラグインは個別に("tooltip.js"ファイルを使用)、またはまとめて( "bootstrap.js"または "bootstrap.min.js"を使用)組み込むことができます。

ツールチップの作成

ツールチップを作成するには、 data-toggle="tooltip" 属性を要素に追加します。
title 属性を使用して、ツールチップ内に表示されるテキストを指定します。

マウスホバー
<a href="#" data-toggle="tooltip" title="Hello">マウスホバー</a>

注: ツールチップをjQueryで初期化する必要があります。指定した要素を選択し、tooltip()メソッドを呼び出します。 次のコードは、ドキュメント内のすべてのツールチップを有効にします。

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

ポジショニング

デフォルトでは、要素の上にツールチップが表示されます。
data-placement属性を使用して、要素の上、下、左または右にツールヒントの位置を設定できます。

<a href="#" data-toggle="tooltip" data-placement="top" title="Hello">top</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hello">bottom</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hello">left</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hello">right</a>

ヒント: 「auto」の値を持つ data-placement 属性を使用して、ブラウザがツールチップの位置を決定できるようにすることもできます。たとえば、値が "auto left"の場合、ツールチップは可能な場合は左側に表示され、そうでない場合は右側に表示されます。