English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
リンクを説明したい場合、ツールチップ（Tooltip）は非常に役立ちます。ツールチップ（Tooltip）プラグインは Jason Frame で書かれています。 jQuery.tipsy のアイデアに基づいて、ツールチップ（Tooltip）プラグインは多くの改善が行われています。例えば、画像に依存せずにCSSを使用してアニメーション効果を実現し、タイトル情報をdata属性で保存します。
プラグインの機能を独立して参照したい場合は、以下をインクルードする必要があります。 tooltip.js。または、以下の Bootstrap プラグイン概要 の章で述べたように、以下を参照できます。 bootstrap.js または圧縮版の bootstrap.min.js。
ツールチップ（Tooltip）プラグインは必要に応じて内容とマークを生成し、デフォルトでは、ツールチップをトリガーエレメントの後ろに配置します。ツールチップを追加する方法は以下の2種類があります：
属性を追加するだけで十分です：ツールチップを追加するには、アンカータグに data-toggle="tooltip" 即可。アンカーのtitleがツールチップのテキストです。デフォルトでは、プラグインはツールチップを上部に設定します。
<a href="#" data-toggle="tooltip" title="Example tooltip">上にホバーしてください</a>
通过 JavaScript：JavaScriptでトリガーするツールチップ：
$('#identifier').tooltip(options)ツールチップ(Tooltip)プラグインは、以前に議論されたドロップダウンメニューや他のプラグインとは異なり、純CSSプラグインではありません。このプラグインを使用するには、jQueryを使用してアクティベートする必要があります（javascriptを読み取ります）。以下のスクリプトを使用して、ページ内のすべてのツールチップを有効にします：
$((function () { $("[data-toggle='tooltip']").tooltip(); });以下の例では、data属性を使用してツールチップ(Tooltip)プラグインの使用方法を示しています。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap サンプル - ツールチップ(Tooltip)プラグイン</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>ツールチップ(Tooltip)プラグイン - アンカー</h4>
これは <a href="#" class="tooltip-test" data-toggle="tooltip" title="デフォルトの Tooltip">デフォルトの Tooltip</a>.
これは <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左側の Tooltip">左側の Tooltip</a>.
これは <a href="#" data-toggle="tooltip" data-placement="top" title="上部の Tooltip">上部の Tooltip</a>.
これは <a href="#" data-toggle="tooltip" data-placement="bottom" title="下部の Tooltip">下部の Tooltip</a>.
これは <a href="#" data-toggle="tooltip" data-placement="right" title="右側の Tooltip">右側の Tooltip</a>
<br>
<h4>ツールチップ(Tooltip)プラグイン - ボタン</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="デフォルトの Tooltip"> デフォルトの Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左側の Tooltip">左側の Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上部の Tooltip">上部の Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="下部の Tooltip">下部の Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右側の Tooltip">右側の Tooltip</button>
<script>
$((function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>テストをしてみる ‹/›以下の結果が表示されます：
一部のオプションはBootstrapデータAPI（Bootstrap Data API）を通じて追加されたり、JavaScriptで呼び出されたりします。以下のテーブルにこれらのオプションを示します：
| オプションの名称 | タイプ/デフォルト値 | データ属性の名称 | 説明 |
|---|---|---|---|
| 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。複数のトリガーを渡すことができます。各トリガーはスペースで区切ります。 |
| delay | number | object デフォルト値：0 | data-delay | ヒントツールの表示と非表示を遅延するミリ秒数 - manual手動トリガータイプには適用されません。数字が提供された場合、遅延は表示と非表示に適用されます。オブジェクトが提供された場合、以下の構造です：delay:
{ show: 500, hide: 100 } |
| container | string | false デフォルト値：false | data-container | 指定された要素にヒントツールを追加します。 例：container: 'body' |
以下は、ヒントツール（Tooltip）プラグインで役立つメソッドの一部です：
| メソッド | 説明 | サンプル |
|---|---|---|
| オプション: .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') |
以下の例では、ツールチップ(Tooltip)プラグインメソッドの使用法を示しています。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap サンプル - ツールチップ(Tooltip)プラグインメソッド</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
これは
<a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show</a>.
これは
<a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide</a>.
これは
<a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy</a>.
これは
<a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >
これは
<a href="#" data-toggle="tooltip" title="<h2'>am Header2 </h2>">Tooltip 方法 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>
</body>
</html>テストをしてみる ‹/›以下の結果が表示されます：
以下のテーブルに、ツールチップ(Tooltip)プラグインで使用するイベントが示されています。これらのイベントは、関数内でフックとして使用できます。
| イベント | 説明 | サンプル |
|---|---|---|
| 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 () {
// アクションを実行します...
}); |
以下のサンプルは、ツールチップ(Tooltip)プラグインイベントの使用法を示しています。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap サンプル - ツールチップ(Tooltip)プラグインイベント</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>ツールチップ(Tooltip)プラグイン - アンカー</h4>
これは <a href="#" class="tooltip-show" data-toggle="tooltip"
title="デフォルトの ツールチップ">デフォルトの ツールチップ
</a>.
<script>
$(function() { $('.tooltip}}-show').tooltip('show');});
$(function() { $('.tooltip}}-$.fn.tooltip = function(options) {
options = options || {};
alert("Alert message on show");
})});
</script>
</body>
</html>テストをしてみる ‹/›以下の結果が表示されます：