弹出窗口类似于工具提示，提供带有标题的扩展视图。为了激活弹出框，用户只需将光标悬停在元素上。可以使用Bootstrap Data API完全填充弹出窗口的内容。此方法需要工具提示。

如果要单独包含此插件功能，则将需要popover.js且它具有tooltip plugin的依赖项。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法

popover插件根据需要生成内容和标记，默认情况下将popover放置在其触发元素之后。您可以通过以下两种方式添加弹出窗口-

• 通过数据属性-要添加弹出窗口，请将data-toggle =“ popover”添加到锚点/按钮标签。锚点的标题将是弹出框的文本。默认情况下，插件会将popover设置为top。

   Hover over me

• 通过JavaScript -使用下面的语法允许通过JavaScript popovers –

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

Popover插件不仅是下拉菜单之类的CSS插件，也不是前面章节中讨论的其他插件。要使用此插件，您必须使用jquery激活它(阅读javascript)。要启用页面上的所有弹出窗口，只需使用此脚本-

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

例

以下示例通过数据属性演示了popover插件的使用。

   
      
      Popover on left
   
   
   
      
      Popover on top
   
   
   
      
      Popover on bottom
   
   
   
      
      Popover on right
   
   

选件

有某些选项可以通过Bootstrap Data API添加或通过JavaScript调用。下表列出了选项-

delay: { show: 500, hide: 100 }

方法

以下是一些有用的弹出窗口方法-

$().popover(options)

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

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

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

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

例

以下示例演示了popover插件方法-

   
      
      Popover on left
   
   
   
      
      Popover on top
   
   
   
      
      Popover on bottom
   
   
   
      
      Popover on right
   
    
   






   
   

      
         
         Popover
      
   
   
   
    

大事记

下表列出了可用于popover插件的事件。此事件可用于挂接到函数。

$('#mypopover').on('show.bs.popover', function () {
   // do something
})

$('#mypopover').on('shown.bs.popover', function () {
   // do something
})

$('#mypopover').on('hide.bs.popover', function () {
   // do something
})

$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

例

以下示例演示了Popover插件事件-

   
      
      Popover on left