ブートストラップ-ツールチッププラグイン

リンクを説明する必要がある場合は、ツールチップが役立ちます。プラグインは、触発されたjQuery.tipsyによって書かれたプラグインジェイソンフレーム。その後、ツールチップが更新され、画像なしで機能し、CSSアニメーションでアニメーション化し、ローカルタイトルストレージのデータ属性を使用できるようになりました。

このプラグイン機能を個別に含めたい場合は、 tooltip.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、bootstrap.jsまたは縮小されたbootstrap.min.jsを含めることができます。

使用法

ツールチッププラグインは、オンデマンドでコンテンツとマークアップを生成し、デフォルトでは、トリガー要素の後にツールチップを配置します。次の2つの方法でツールチップを追加できます-

Via data attributes −ツールチップを追加するには、 data-toggle = "tooltip"アンカータグに。アンカーのタイトルはツールチップのテキストになります。デフォルトでは、ツールチップはプラグインによってトップに設定されています。

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

Via JavaScript −JavaScriptを介してツールチップをトリガーします−

$('#identifier').tooltip(options)

ツールチッププラグインだけではありません-ドロップダウンのようなcssプラグインや、前の章で説明した他のプラグイン。このプラグインを使用するには、jqueryを使用してプラグインをアクティブ化する必要があります（javascriptを読んでください）。ページ上のすべてのツールチップを有効にするには、このスクリプトを使用するだけです-
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

例

次の例は、データ属性を介したツールチッププラグインの使用法を示しています。

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

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

オプション

Bootstrap Data APIを介して追加したり、JavaScriptを介して呼び出すことができる特定のオプションがあります。次の表にオプションを示します-

オプション名	タイプ/デフォルト値	データ属性名	説明
アニメーション	ブールデフォルト：true	データアニメーション	CSSフェードトランジションをツールチップに適用します。
html	ブールデフォルト：false	data-html	HTMLをツールチップに挿入します。falseの場合、jQueryのtextメソッドを使用してコンテンツをDOMに挿入します。XSS攻撃が心配な場合は、テキストを使用してください。
配置	string \| functionデフォルト：top	データ配置	ツールチップの配置方法を指定します（つまり、上\|下\|左\|右\|自動）。場合はautoが指定され、それが動的ツールヒントを再配向します。たとえば、配置が「自動左」の場合、ツールチップは可能な場合は左に表示され、そうでない場合は右に表示されます。
セレクタ	文字列デフォルト：false	データセレクタ	セレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委任されます。
題名	文字列\| 関数デフォルト： "	データタイトル	title属性が存在しない場合、titleオプションがデフォルトのtitle値です。
引き金	文字列デフォルト： 'ホバーフォーカス'	データトリガー	ツールチップのトリガー方法を定義します。 click\| hover \| focus \| manual。複数のトリガーを渡すことができます。それらをスペースで区切ります。
コンテンツ	文字列\| 関数デフォルト： ''	データコンテンツ	data-content属性が存在しない場合のデフォルトのコンテンツ値
ディレイ	番号\| オブジェクトデフォルト：0	データ遅延	ツールチップの表示と非表示の遅延（ミリ秒）—手動トリガータイプには適用されません。番号が指定されている場合、遅延は非表示/表示の両方に適用されます。オブジェクト構造は− `delay: { show: 500, hide: 100 }`
コンテナ	文字列\| falseデフォルト：false	データコンテナ	ツールチップを特定の要素に追加します。例：コンテナ： 'body'

メソッド

以下は、ツールチップのいくつかの便利な方法です-

方法	説明	例
Options − .tooltip（options）	ツールチップハンドラーを要素コレクションにアタッチします。	`$().tooltip(options)`
Toggle − .tooltip（ 'toggle'）	要素のツールチップを切り替えます。	`$('#element').tooltip('toggle')`
Show − .tooltip（ 'show'）	要素のツールチップを表示します。	`$('#element').tooltip('show')`
Hide − .tooltip（ 'hide'）	要素のツールチップを非表示にします。	`$('#element').tooltip('hide')`
Destroy − .tooltip（ 'destroy'）	要素のツールチップを非表示にして破棄します。	`$('#element').tooltip('destroy')`

例

次の例は、データ属性を介したツールチッププラグインの使用法を示しています。

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

イベント

次の表に、ツールチッププラグインで機能するイベントを示します。このイベントは、関数にフックするために使用できます。

イベント	説明	例
show.bs.tooltip	このイベントは、showinstanceメソッドが呼び出されるとすぐに発生します。	`$('#myTooltip').on('show.bs.tooltip', function () { // do something })`
show.bs.tooltip	このイベントは、ツールチップがユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。	`$('#myTooltip').on('shown.bs.tooltip', function () { // do something })`
hide.bs.tooltip	このイベントは、hideinstanceメソッドが呼び出されるとすぐに発生します。	`$('#myTooltip').on('hide.bs.tooltip', function () { // do something })`
hidden.bs.tooltip	このイベントは、ツールチップがユーザーから隠され終わったときに発生します（CSS遷移が完了するのを待ちます）。	`$('#myTooltip').on('hidden.bs.tooltip', function () { // do something })`

例

次の例は、データ属性を介したツールチッププラグインの使用法を示しています。

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>