有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| animation | boolean 默认值：true |
data-animation | 向弹出框应用 CSS 褪色过渡效果。 |
| html | boolean 默认值：false |
data-html | 向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。 |
| placement | string|function 默认值：top |
data-placement | 规定如何定位弹出框（即 top|bottom|left|right|auto）。 当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector | string 默认值：false |
data-selector | 如果提供了一个选择器，弹出框对象将被委派到指定的目标。 |
| title | string | function 默认值：'' |
data-title | 如果未指定 title 属性，则 title 选项是默认的 title 值。 |
| trigger | string 默认值：'hover focus' |
data-trigger | 定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。 |
| delay | number | object 默认值：0 |
data-delay | 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay:
{ show: 500, hide: 100 } |
| container | string | false 默认值：false |
data-container | 向指定元素追加弹出框。 实例： container: 'body' |
方法
下面是一些弹出框（Popover）插件中有用的方法：
| 方法 | 描述 | 实例 |
|---|---|---|
| Options: .popover(options) | 向元素集合附加弹出框句柄。 | $().popover(options) |
| Toggle: .popover('toggle') | 切换显示/隐藏元素的弹出框。 | $('#element').popover('toggle') |
| Show: .popover('show') | 显示元素的弹出框。 | $('#element').popover('show') |
| Hide: .popover('hide') | 隐藏元素的弹出框。 | $('#element').popover('hide') |
| Destroy: .popover('destroy') | 隐藏并销毁元素的弹出框。 | $('#element').popover('destroy') |
事例一、
<div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-default" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容"> 左侧的 Popover </button> <button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容"> 顶部的 Popover </button> <button type="button" class="btn btn-success" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容"> 底部的 Popover </button> <button type="button" class="btn btn-warning" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容"> 右侧的 Popover </button> </div> <script> $(function (){ $("[data-toggle='popover']").popover(); }); </script> </div>
事例二、
var maxtip = '最多只能选择6个项目';
$(dom).popover({
html:true,
content: maxtip,
trigger:"manual",
placement:"top"
});
$(dom).popover("show");
setTimeout(function(){
$(dom).popover("hide");
},3000)
