最新のWeb開発のチュートリアル
 

Bootstrapツールチッププラグイン


ツールチッププラグイン

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

私の上にマウスを移動

ヒント:プラグインは、(使用して、個別に含めることができるBootstrap's個々の"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 left"可能な場合、ツールチップは、そうでない場合は右側に、左側に表示されます。


ブートストラップツールチップ・リファレンスを完了

すべてのツールチップのオプション、メソッドおよびイベントの完全なリファレンスについては、当社に行くブートストラップJSツールチップリファレンス