Bootstrap 提示工具（Tooltip）插件

リンクを説明したい場合、ツールチップ（Tooltip）は非常に便利です。ツールチップ（Tooltip）プラグインは、Jason Frame書いたjQuery.tipsyの影響を受けています。ツールチップ（Tooltip）プラグインには多くの改良が加えられています。例えば、画像に依存する必要がなく、代わりにCSSでアニメーション効果を実装し、data属性でタイトル情報を保存します。

このプラグインの機能を単体で利用したい場合は、次を参照する必要があります。tooltip.js。あるいは、ちょうどBootstrap 插件概览一章で述べたように、参照することができます。bootstrap.jsまたは圧縮版のbootstrap.min.js。

用法

ツールチップ（Tooltip）プラグインは、必要に応じてコンテンツとマークアップを生成し、デフォルトではツールチップをトリガー要素の後ろに配置します。ツールチップを追加する方法は次の2つです：

• 通过 data 属性：ツールチップ（Tooltip）を追加するには、アンカータグに追加するだけです。data-toggle="tooltip"それだけです。アンカーの title がツールチップ（tooltip）のテキストになります。デフォルトでは、プラグインはツールチップ（tooltip）を上部に配置します。

  <a href="../index.html" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
  

• 通过 JavaScript：JavaScript を使用してツールチップをトリガーする：

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

ツールチップ（Tooltip）プラグインは、前述のドロップダウンメニューや他のプラグインとは異なり、純粋なCSSプラグインではありません。このプラグインを使用するには、jqueryを使用してアクティブにする必要があります（JavaScriptを参照）。次のスクリプトを使用して、ページ内のすべてのツールチップを有効にします：

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

实例

以下の例では、data 属性を使用してツールチップ（Tooltip）プラグインを使用する方法を示しています。

結果は次のとおりです：

选项

一部のオプションは、BootstrapデータAPI（Bootstrap Data API）を介して追加されるか、JavaScriptを介して呼び出されます。次の表にこれらのオプションを示します：

delay:
{ show: 500, hide: 100 }

方法

以下は、ツールチップ（Tooltip）プラグインで役立つメソッドの一部です：

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#element').tooltip('destroy')

实例

以下の例は、ツールチップ（Tooltip）プラグインのメソッドの使い方を示しています。

結果は次のとおりです：

事件

次の表に、ツールチップ（Tooltip）プラグインで使用されるイベントを示します。これらのイベントは関数内でフックとして使用できます。

$('#myTooltip').on('show.bs.tooltip', function () {
  // 执行一些动作...
})

$('#myTooltip').on('shown.bs.tooltip', function () {
  // 执行一些动作...
})

$('#myTooltip').on('hide.bs.tooltip', function () {
  // 执行一些动作...
})

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // 执行一些动作...
})

实例

以下の例は、ツールチップ（Tooltip）プラグインのイベントの使い方を示しています。

結果は次のとおりです：