ブートストラップのツールチップ
Bootstrap Tooltip プラグイン
Tooltip は、リンクを説明するときに非常に便利です。 Tooltip プラグインは、Jason Frame によって作成された jQuery.tipsy からインスピレーションを得ています。たとえば、Tooltip プラグインには多くの改良が加えられており、画像に依存する必要がなくなり、代わりに CSS を使用してアニメーション効果を実現し、データ属性を使用してタイトル情報を保存します。
このプラグインの機能を個別に参照したい場合は、tooltip.jsを参照する必要があります。または、「ブートストラップ プラグインの概要」の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照できます。
使用法
ツールチップ プラグインは、必要に応じてコンテンツとマークアップを生成します。デフォルトでは、ツールチップはトリガー要素の後ろに配置されます。ツールヒントは次の 2 つの方法で追加できます:
data 属性を介して : ツールヒントを追加するには、アンカー タグに data-toggle="tooltip" を追加するだけです。アンカーのタイトルはツールヒントのテキストです。デフォルトでは、プラグインはツールチップを上部に配置します。
<a href="#" data-toggle="tooltip" title="ツールヒントの例">私のツールチップの上にカーソルを置いてください</a>
JavaScript 経由: ツールヒントをトリガーします。 JavaScript:
$('#identifier').tooltip(options)
Tooltip プラグインは、前に説明したドロップダウン メニューや他のプラグインとは異なり、純粋な CSS プラグインではありません。プラグインを使用するには、jquery (JavaScript を読み取る) を使用してプラグインを有効にする必要があります。次のスクリプトを使用して、ページ上のすべてのツールヒントを有効にします: $(function () { $("[data-toggle='tooltip']").tooltip(); });例
次の例は、data 属性を使用した Tooltip プラグインの使用を示しています。
インスタンス
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/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 Data API を通じて追加されるか、JavaScript を通じて呼び出されるオプションがいくつかあります。オプションは次の表にリストされています:
| オプション名 | タイプ/デフォルト値 | データプロパティ名 | 説明 | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| アニメーション | ブール デフォルト値: true | data -アニメーション | プロンプトツールはCSSグラデーションフィルター効果を使用します。 | |||||||||||||||||||||||||||||||||
| html | boolean デフォルト: false | data-html | ツールチップにHTMLを挿入します。 false の場合、jQuery の text メソッドを使用してコンテンツを dom に挿入します。 XSS 攻撃が心配な場合は、テキストを使用してください。 | |||||||||||||||||||||||||||||||||
| placement | string|function デフォルト値: top | data-placement | ツールヒントの配置方法を指定します (つまり、top|bottom|left|right|auto)。 auto として指定すると、ツールチップが動的に調整されます。たとえば、配置が「自動左」の場合、ツールチップは可能であれば左側に表示され、状況によってはそれができない場合には右側に表示されます。 | |||||||||||||||||||||||||||||||||
| string | デフォルト: false | data-selectorセレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委任されます。 | ||||||||||||||||||||||||||||||||||
| string | function | デフォルト値: '' | data-titletitle 属性が指定されていない場合、title オプションはデフォルトのタイトル値です。 | ||||||||||||||||||||||||||||||||||
| string | デフォルト: 'hover focus' | data-triggerツールチップをトリガーする方法を定義します。複数のトリガーをスペースで区切って渡すことができます。 | content | |||||||||||||||||||||||||||||||||
| デフォルト値: '' | data-content | data-content | 属性が指定されていない場合は、デフォルトのコンテンツ値が使用されます。delay | |||||||||||||||||||||||||||||||||
| デフォルト: 0 | data-delay | ツールチップの表示と非表示を遅延するミリ秒数 - 手動トリガー タイプには適用されません。数値を指定すると、表示と非表示に遅延が適用されます。オブジェクトが指定されている場合、構造は次のようになります: container | ||||||||||||||||||||||||||||||||||
| デフォルト値: false | data-container | 指定された要素にツールチップを追加します。 例: コンテナ: 'body' |
| メソッド | 説明 | インスタンス |
|---|---|---|
| オプション: .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>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件方法</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/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 プラグインで使用されるイベントのリストです。これらのイベントは関数のフックとして使用できます。
| Event | Description | Instance |
|---|---|---|
| show.bs.tooltip | このイベントは、show インスタンス メソッドが呼び出されるとすぐにトリガーされます。 | $('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
}) |
| shown.bs.tooltip | このイベントは、ツールチップがユーザーに表示されるとトリガーされます (CSS トランジション効果が完了するまで待機します)。 | $('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
}) |
| hide.bs.tooltip | このイベントは、インスタンスの非表示メソッドが呼び出されるとすぐにトリガーされます。 | $('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
}) |
| hidden.bs.tooltip | このイベントは、ツールチップがユーザーに対して非表示になったときにトリガーされます (CSS トランジション効果が完了するまで待機します)。 | $('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
}) |
例
次の例は、ツールチッププラグインイベントの使用法を示しています
例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件事件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="默认的 Tooltip">默认的 Tooltip
</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行]ボタンをクリックしてください
