Bootstrap JS Popover 插件
JS Popover (popover.js)
Popover 插件类似于工具提示，它是一个弹出框，当用户单击某个元素时会出现。不同之处在于，popover 可以包含更多内容。
插件依赖性: Popovers 要求工具提示插件（tooltip.js）包含在您的 Bootstrap 版本中。
学习更多的 Popover 知识, 可以访问本站的 Bootstrap 弹出框教程。
通过 data-* 属性
data-toggle=”popover" 激活弹出框。
title 属性指定弹出框的标题内容。
data-content 属性指定应显示在 popover 主体内的文本。
实例
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
通过 JavaScript
Popover 不是仅限于 CSS 的插件，因此必须使用 jQuery 初始化：选择指定的元素并调用 popover() 方法。
实例
// Select allelements with data-toggle="popover" in the document$('[data-toggle="popover"]').popover();// Select a specifiedelement$('#myPopover').popover();
Popover Options
Options 可以通过数据属性或 JavaScript 传递。对于数据属性，请将选项名称附加到 data-，如 data-backdrop=""。
| 名称 | 类型 | 默认 | 描述 | 试一试 |
|---|---|---|---|---|
| animation | boolean | true | 指定在打开和关闭 popover 时是否添加 CSS 淡入淡出过渡效果
| 试一试 |
| container | string 或 false | false | 将 popover 附加到一个指定元素。 比如: container: 'body' | 试一试 |
| content | string | "" | 指定 popover 主体内的文本 | 试一试 |
| delay | number, 或 object | 0 | 指定打开和关闭 popover 所需的毫秒数。 要指定打开延迟和关闭延迟，请使用对象结构: delay: {show: 500, hide: 100} - 表示打开 popover 需要 500 毫秒，但关闭 popover 只需要 100 毫秒 | 试一试 |
| html | boolean | false | 指定 popover 中是否可以使用 HTML 标记:
当设置为 false (默认), jQuery 的 text() 方法将会启用。如果您担心 XSS 攻击可以使用这个。 | 试一试 |
| placement | string | "right" | 指定 popover 的位置。值可以为:
| 试一试 |
| selector | string 或 false | false | 将 popover 添加到指定的选择器 | 试一试 |
| template | string | 创建 popover 时要使用的基本 HTML。 popover 的标题将被注入到 .popover-title popover 的内容将被注入到 .popover-content. .arrow 将变成 popover 的箭头 最外层的元素应该具有 .popover 样式类 | ||
| title | string | "" | 指定 popover 标题的文本 | 试一试 |
| trigger | string | "click" | 指定 popover 如何触发。值可以为:
| 试一试 |
| viewport | string, 或 object | {selector: "body", padding: 0} | 将 popover 保持在此元素的范围内。 例如: viewport: '#viewport' 或 {selector: '#viewport', padding: 0} |
Popover 方法
下表列出了所有可用的 popover 方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .popover(options) | 用一个选项激活 popover。有关有效值，请参见上面的选项 | 试一试 |
| .popover("show") | 显示 popover | 试一试 |
| .popover("hide") | 隐藏 popover | 试一试 |
| .popover("toggle") | 切换 popover | 试一试 |
| .popover("destroy") | 隐藏并销毁 popover | 试一试 |
Popover 事件
下表列出了所有可用的 popover 事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| show.bs.popover | 在即将显示 popover 时发生 | 试一试 |
| shown.bs.popover | 在 popover 完全显示时发生（CSS 过渡完成后） | 试一试 |
| hide.bs.popover | 在 popover 即将隐藏时发生 | 试一试 |
| hidden.bs.popover | 在 popover 完全隐藏时发生（CSS 过渡完成后） | 试一试 |
更多实例
自定义 Popover 设计
使用 CSS 自定义 popover 的外观:
实例
/* Popover */.popover {border: 2px dotted red;}/* Popover Header */.popover-title {background-color: #73AD21;color: #FFFFFF;font-size: 28px;text-align:center;}/* Popover Body */.popover-content {background-color: coral;color: #FFFFFF;padding: 25px;}/* Popover Arrow */.arrow {border-right-color: red !important;}