Bootstrap 弹出框（Popover）插件

ポップオーバー（Popover）はツールチップ（Tooltip）と似ており、拡張されたビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素にマウスポインターを置くだけです。ポップオーバーのコンテンツは完全に Bootstrap データ API（Bootstrap Data API）を使用して埋め込むことができます。このメソッドはツールチップ（tooltip）に依存しています。

このプラグインの機能を単独で参照したい場合は、以下を参照する必要があります。popover.js，它依赖于工具提示（Tooltip）插件。あるいは、まさにBootstrap 插件概览一章で述べたように、あなたは引用することができますbootstrap.jsまたは圧縮版のbootstrap.min.js。

用法

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

• 通过 data 属性ポップオーバー（popover）を追加するには、アンカー/ボタンタグに追加するだけです。data-toggle="popover"それで十分です。アンカーの title がポップオーバー（popover）のテキストになります。デフォルトでは、プラグインはポップオーバー（popover）を上部に設定します。

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

• 通过 JavaScript：JavaScript を使用してポップオーバー（popover）を有効にする：

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

ポップオーバー（Popover）プラグインは、前述のドロップダウンメニューやその他のプラグインとは異なり、純粋な CSS プラグインではありません。このプラグインを使用するには、jQuery を使用してアクティブにする必要があります（javascript を参照）。以下のスクリプトを使用して、ページ内のすべてのポップオーバー（popover）を有効にします。

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

实例

以下の例は、data 属性を使用してポップオーバー（Popover）プラグインを利用する方法を示しています。

結果は次のようになります：

选项

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

delay:
{ show: 500, hide: 100 }

方法

以下は、ポップオーバー（Popover）プラグインで役立つメソッドの一部です。

$().popover(options)

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

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

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

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

实例

以下の例は、ポップオーバー（Popover）プラグインのメソッドを示しています：

結果は次のようになります：

事件

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

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

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

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

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

实例

以下の例は、ポップオーバー（Popover）プラグインのイベントを示しています：

結果は次のようになります：