Bootstrap JS 气泡提示
JS 气泡提示 (popover.js)
气泡提示插件类似于工具提示；它是一个弹出框，当用户点击某个元素时出现。区别在于气泡提示可以包含更多内容。
插件依赖：气泡提示需要工具提示插件 (tooltip.js) 包含在您的 Bootstrap 版本中。
有关气泡提示的教程，请阅读我们的 Bootstrap 气泡提示教程.
通过 data-* 属性
data-toggle="popover" 激活气泡提示。
title 属性指定气泡提示的标题文本。
data-content 属性指定应显示在气泡提示主体内的文本。
通过 JavaScript
气泡提示不是纯 CSS 插件，因此必须使用 jQuery 初始化：选择指定的元素并调用 popover() 方法。
示例
// 选择文档中所有具有 data-toggle="popover" 属性的元素
$('[data-toggle="popover"]').popover();
// 选择指定元素
$('#myPopover').popover();
自己试试 »
气泡提示选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称附加到 data-，例如 data-placement=""。
| 名称 | 类型 | 默认值 | 描述 | 试试 |
|---|---|---|---|---|
| animation | 布尔值 | true |
指定在打开和关闭气泡提示时是否添加 CSS 淡入淡出过渡效果
|
试试 |
| container | 字符串或布尔值 false | false | 将气泡提示附加到特定元素。 示例：container: 'body' |
试试 |
| content | 字符串 | "" | 指定气泡提示主体内的文本 | 试试 |
| delay | 数字或对象 | 0 | 指定打开和关闭气泡提示所需的时间（毫秒）。 要为打开和关闭指定不同的延迟，请使用对象结构 delay: {show: 500, hide: 100} - 打开气泡提示需要 500 毫秒，而关闭气泡提示只需要 100 毫秒 |
试试 |
| html | 布尔值 | false | 指定是否接受气泡提示中的 HTML 标签
当设置为 false（默认值）时，将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击，请使用此方法 |
试试 |
| placement | 字符串 | "right" | 指定气泡提示的位置。可能的取值
|
试试 |
| selector | 字符串或布尔值 false | false | 将气泡提示添加到指定的选择器 | 试试 |
| template | 字符串 | 创建气泡提示时使用的基础 HTML。 气泡提示的标题将被注入到 .popover-title 中。 气泡提示的内容将被注入到 .popover-content 中。 .arrow 将成为气泡提示的箭头。 最外层的包装元素应具有 .popover 类。 |
||
| title | 字符串 | "" | 指定气泡提示的标题文本 | 试试 |
| trigger | 字符串 | "click" | 指定气泡提示的触发方式。可能的取值
|
试试 |
| viewport | 字符串或对象 | {selector: "body", padding: 0} | 将气泡提示保持在这个元素的范围内。 示例：viewport: '#viewport' 或 {selector: '#viewport', padding: 0} |
气泡提示方法
下表列出了所有可用的气泡提示方法。
| 方法 | 描述 | 试试 |
|---|---|---|
| .popover(options) | 使用选项激活气泡提示。有关有效值的详细信息，请参阅上面的选项 | 试试 |
| .popover("show") | 显示气泡提示 | 试试 |
| .popover("hide") | 隐藏气泡提示 | 试试 |
| .popover("toggle") | 切换气泡提示 | 试试 |
| .popover("destroy") | 隐藏并销毁气泡提示 | 试试 |
气泡提示事件
下表列出了所有可用的气泡提示事件。
| 事件 | 描述 | 试试 |
|---|---|---|
| show.bs.popover | 当气泡提示即将显示时发生 | 试试 |
| shown.bs.popover | 当气泡提示完全显示时发生（在 CSS 过渡完成之后） | 试试 |
| hide.bs.popover | 当气泡提示即将隐藏时发生 | 试试 |
| hidden.bs.popover | 当气泡提示完全隐藏时发生（在 CSS 过渡完成之后） | 试试 |
更多示例
自定义气泡提示设计
使用 CSS 自定义气泡提示的外观
示例
/* 气泡提示 */
.popover {
border: 2px dotted red;
}
/* 气泡提示标题 */
.popover-title {
background-color: #73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* 气泡提示主体 */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* 气泡提示箭头 */
.arrow {
border-right-color: red !important;
}
自己试试 »
