ブートストラップツールチップ（ツールチップ）ウィジェット
あなたがリンクを記述する場合は、ツールヒント（ツールチップ）は、非常に便利です。ジェイソンフレームに触発されたツールチップ（ツールチップ）プラグインがjQuery.tipsyの件名を書きました。 ツールチップ（ツールチップ）プラグインは、データを情報格納されているタイトルを属性を使用して、代わりにアニメーション効果を達成するためにCSSを使用して、例えば、画像に依存しない、改善するために多くのことを行っています。
あなたは、個々のプラグイン機能を参照したい場合は、tooltip.jsを参照する必要があります。 または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。
使用法
オンデマンドツールチップ（ツールチップ）プラグインによって生成されたコンテンツとタグは、その能動素子の背面にあるデフォルトのツールチップ（ツールチップ）です。 あなたがツールチップ（ツールチップ）を追加する方法は2つあります。
- データ属性を通っ：ツールチップ（ツールチップ）を追加するには、アンカータグであることが、データトグル= "ツールチップ"を追加します。タイトルはアンカーツールチップ（ツールチップ）テキストです。 デフォルトでは、プラグインツールチップ（ツールチップ）は、最上部に設定されています。
<a href="#" data-toggle="tooltip" title="Example tooltip"> </a>の私の上にマウスを移動してください。
- JavaScriptので：JavaScriptをツールチップ（ツールチップ）によってトリガされます。
$（ '＃識別子'）。ツールチップ（オプション）
$（関数（）{$（ "[データトグル= 'ツールチップ']"）ツールチップ（）;.}）;
例
次の例では、データ属性の使用によって、ツールヒント（ツールチップ）ウィジェットの使用方法を示します。
例
<H4> プロンプトツール（ツールチップ）プラグイン-アンカー </ H4を> これは <a は href = "＃" クラス = "ツールチップテスト」 データトグル = "ツールチップ"
タイトル = "デフォルトの ツールチップ"> デフォルトツールチップ </ A>。 これは、<aは href = "＃" クラス = "ツールチップテスト」 データトグル = "ツールチップ"
データ配置は = "左" 左側のタイトル =ツールチップ" 左側に ツールチップ "> </ A>。 これは、<aは href = "＃" データトグル = "ツールチップ" データ配置 = "トップ"
タイトル =「トップ ツールチップ"> トップツールチップ </ A>。 これは 、<A href = "＃" データトグル = "ツールチップ" データ配置 = "底"
タイトル =「ボトム ツールチップ">ツールチップ 底 </ A>。 これは 、<A href = "＃" データトグル = "ツールチップ" データ配置 = "右"
右側のツールチップの タイトル = "右側のツールチップ"> </ A>
<BR>
<H4> プロンプトツール（ツールチップ）ウィジェット-ボタン </ H4>
<ボタン = "ボタン"を入力 クラス = "BTN BTN-デフォルト」 データトグル = "ツールチップ"
タイトル = "デフォルトの ツールチップ"> デフォルトツールチップ </ button>の
<ボタン = "ボタン"を入力 クラス = "BTN BTN-デフォルト」 データトグル = "ツールチップ"
データ配置は = "左" タイトル = "ツールチップ 左側の「 左側ツールチップ上 > </ button>の
<ボタン = "ボタン"を入力 クラス = "BTN BTN-デフォルト」 データトグル = "ツールチップ"
データ配置 = "トップ" タイトル =「トップ ツールチップ"> トップツールチップ </ button>の
<ボタン = "ボタン"を入力 クラス = "BTN BTN-デフォルト」 データトグル = "ツールチップ"
データ配置 = "底" 下部ツールチップに タイトル =「ボトム ツールチップ"> </ button>の
<ボタン = "ボタン"を入力 クラス = "BTN BTN-デフォルト」 データトグル = "ツールチップ"
データ配置 = "右" 右側のツールチップの タイトル = "右側のツールチップ"> </ button>の
<スクリプト> $（関数 （） {$（ "[データトグル = 'ツールチップ']"）ツールチップ（）;.}）; </スクリプト>
»をお試しください
結果は以下の通りであります：
オプション
ブートストラップデータAPI（ブートストラップデータAPI）を介して、またはJavaScript呼び出しを追加することによって、いくつかのオプションがあります。 次の表は、これらのオプションを示します：
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| animation | boolean 默认值：true | data-animation | 提示工具使用 CSS 渐变滤镜效果。 |
| html | boolean 默认值：false | data-html | 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。 |
| placement | string|function 默认值：top | data-placement | 规定如何定位提示工具（即 top|bottom|left|right|auto）。 当指定为auto时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector | string 默认值：false | data-selector | 如果提供了一个选择器，提示工具对象将被委派到指定的目标。 |
| title | string | function 默认值：'' | data-title | 如果未指定title属性，则 title 选项是默认的 title 值。 |
| trigger | string 默认值：'hover focus' | data-trigger | 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。 |
| content | string | function 默认值：'' | data-content | 如果未指定data-content属性，则使用默认的 content 值。 |
| delay | number | object 默认值：0 | data-delay | 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:
{ show: 500, hide: 100 } |
| container | string | false 默认值：false | data-container | 向指定元素追加提示工具。 实例： container: '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 スタイル= "パディング：100pxに100pxに10pxの ;"> これは <a は href = "＃" クラス = "ツールチップ・ショー」 データトグル = "ツールチップ"
タイトル = "ショー">ツールチップ 方式 ショー </ A>。 これは 、<A href = "＃" クラス = "ツールチップに隠します」 データトグル = "ツールチップ"
データ配置は = "左" タイトル = "隠す">ツールチップ 方式の非表示 </ A>。 これは 、<A href = "＃" クラス = "ツールチップ-破壊」 データトグル = "ツールチップ"
データ配置 = "トップ" タイトルは =ツールチップ 方式 破壊 </ A>。 これは、<A> "破壊します" href = "＃" クラス = "ツールチップトグル」 データトグル = "ツールチップ"
データ配置 = "底" タイトル = "トグル">ツールチップ 方式の切り替え</ A>。<br> <BR>で<br>
<P クラスは =「ツールチップ・オプション」 > これは <a は href = "＃" データトグル = "ツールチップ" タイトル= "<H2> 'です >ツールチップのヘッダ2 </ H2>" </ A>メソッドのオプション。</ P>
<スクリプト>
$（ファンクション （） {$（ '.tooltip-ショー' ）ツールチップ（ 'ショー'）;.}）; $（ファンクション （） {$（ '.tooltip-隠す' ）ツールチップ（ '非表示'）;.}）; $（ファンクション （） {$（ '.tooltip-破壊' ）ツールチップ（「破棄する」）;.}）; $（ファンクション （） {$（ '.tooltip-トグル' ）ツールチップ（ 'トグル'）;.}）; $（ファンクション （） 。{$（ ".tooltip-オプション A」）ツールチップ（{HTML：真 }）;}）;
</スクリプト>
<DIV>
»をお試しください
結果は以下の通りであります：
イベント
次の表は、ツールチップ（ツールチップ）は、プラグインのイベントで使用されるように一覧表示されます。 これらのイベントは時フック関数を使用することができます。
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tooltip | 当调用 show 实例方法时立即触发该事件。 |
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
})
|
| shown.bs.tooltip | 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
})
|
| hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件。 |
$('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
})
|
| hidden.bs.tooltip | 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
})
|
例
次の例では、ツールヒント（ツールチップ）プラグインイベントの使用方法を示しています。
例
<H4> プロンプトツール（ツールチップ）プラグイン-アンカー </ H4を> これは <a は href = "＃" クラス = "ツールチップ・ショー」 データトグル = "ツールチップ"
タイトル = "デフォルトの ツールチップ"> デフォルトのツールチップ</ A>。<スクリプト >
$（ファンクション （） {$（ '.tooltip-ショー' ）ツールチップ（ 'ショー'）;.}）; $（ファンクション （） {$（ '.tooltip-ショー」 ）。（' show.bs.tooltip」について、機能 （） {
警告（「ショーの警告メッセージ" ）;}）
}）;
</スクリプト>
»をお試しください
結果は以下の通りであります：
