Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供一个扩展视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用Bootstrap数据API（ Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。

如果您想要单独引用该插件的功能，那么您需要引用popover.js，依赖它于工具提示（提示）插件。或者如自举概览插件一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。

用法

插入框（Popover）插件根据需求生成内容和标记，替换情况下是把插入框（popover）放在其触发元素后面。您可以以以下方式添加放入框（popover）：

• 通过数据属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加data-toggle =“ popover ”即可。锚的标题即为弹出框（popover）的文本。有时情况下，插件把弹出框（popover）设置在顶部。

<a  href\="#"data-toggle\="popover"title\="示例popover"\> 请悬停在我的上面 </a>

• 通过JavaScript：通过JavaScript启用弹出框（弹出框）：

$（'＃identifier'）。popover（选项）

插入框（Popover）插件不像之前所讨论的拖放菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，您必须使用jquery激活它（读取javascript）。中的所有的弹出框（弹出）：

$（function（）{$（“  \[data\-toggle \='popover'\]”）。popover（）;}）;

实例

下面的实例演示了通过数据属性使用插入框（Popover）插件的用法。

实例

< div class = “ container ” style = “ padding：100px 50px 10px; ” >> < button type = “ button ” class = “ btn btn-default ” title = “ Popover标题” data-container = “ body ” data-toggle = “ popover ” data-placement = “ left ” data-content = “顶端的Popover中的一些内容   


            “ > 
        弹出式弹出器
     </ button > < 按钮类型= ” 按钮“ 类= ” btn btn-primary “ 标题= ” 弹出式标题“ data-container = ” body “ data-toggle = ” popover “ data-placement = ” top “ data-content = ” 顶部的Popover中的一些内容“ > 
        顶部的Popover
     </ 按钮>



    < button type = “ button ” 类= “ btn btn-success ” 标题= “ Popover标题” data-container = “ body ” data-toggle = “ popover ” data-placement = “ bottom ” data-content = “ 底部的Popover中的一些内容“ > 
        底部的弹出框
     </ button > < button type = ”按钮“   


      class = “ btn btn-warning ” title = “ Popover title ” data-container = “ body ” data-toggle = “ popover ” data-placement = “ right ” data-content = “ 右侧的Popover中的一些内容” > 
        右边的Popover
     </ 按钮> </ div > < 脚本> 




$ （function （）{ 
    $ （“ [data-toggle ='popover'] ” ）。popover （）;
 } ）; 
</ 脚本> </ div >

结果如下所示：

选项

有一些选项是通过Bootstrap数据API（Bootstrap Data API）添加或通过JavaScript调用的。

方法

下面是一些弹出框（Popover）插件中有用的方法：

实例

下面的实例演示了弹出框（Popover）插件的方法：

实例

<div  class\="container"  style\="padding: 100px 50px 10px;"  \> 
<button  type\="button"  class\="btn btn-default popover-show"  
title\="Popover title"  data-container\="body"  data-toggle\="popover" 
data-placement\="left"  data-content\="左侧的 Popover 中的一些内容 —— show 方法"\> 
左侧的 Popover </button\>  <button  type\="button" 
class\="btn btn-primary popover-hide"  title\="Popover title"
data-container\="body"  data-toggle\="popover"  data-placement\="top" 
data-content\="顶部的 Popover 中的一些内容 —— hide 方法"\> 顶部的 Popover 
</button\>  <button  type\="button"  class\="btn btn-success popover-destroy" 
title\="Popover title"  data-container\="body"  data-toggle\="popover" 
data-placement\="bottom"  data-content\="底部的 Popover 中的一些内容 —— destroy 方法"\>
底部的 Popover </button\>  <button  type\="button" 
class\="btn btn-warning popover-toggle"  title\="Popover title" 
data-container\="body"  data-toggle\="popover"  data-placement\="right" 
data-content\="右侧的 Popover 中的一些内容 —— toggle 方法"\> 右侧的 Popover 
</button\><br\><br\><br\><br\><br\><br\>  <p  class\="popover-options"\> 
<a  href\="#"  type\="button"  class\="btn btn-warning"  title\="<h2>Title</h2>"
data-container\="body"  data-toggle\="popover"  data-content\="
<h4>Popover 中的一些内容 —— options 方法</h4>"\> Popover </a\>  </p\>  <script\>

$(function  ()  { $('.popover-show').popover('show');}); $(function  ()  { 
$('.popover-hide').popover('hide');});
$(function  ()  {
$('.popover-destroy').popover('destroy');}); $(function  ()  {
$('.popover-toggle').popover('toggle');}); $(function  ()  {
$(".popover-options a").popover({html : true  });
});

</script\>  </div\>

结果如下所示：

事件

下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了弹出框（Popover）插件的事件：

实例

<div  clas\="container"  style\="padding: 100px 50px 10px;"  \> 
<button  type\="button"  class\="btn btn-primary popover-show" 
title\="Popover title"  data-container\="body"  data-toggle\="popover" 
data-content\="左侧的 Popover 中的一些内容 —— show 方法"\> 左侧的 Popover </button\> 
</div\>  <script\>

$(function  ()  { $('.popover-show').popover('show');}); $(function  ()  {
$('.popover-show').on('shown.bs.popover', function  ()  { 
alert("当显示时警告消息"); 
}) 
} ）;

</ 脚本\> </ div \>

结果如下所示：