Bootstrap JS 弹出框
JS 弹出框
弹出框组件类似于工具提示，它是一个在用户点击元素时出现的弹出框。区别在于弹出框可以包含更多内容。
有关弹出框的教程，请阅读我们的 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 | boolean | true |
指定在打开和关闭弹出框时是否添加 CSS 淡入淡出过渡效果
|
尝试一下 |
| container | string，或 boolean false | false | 将弹出框附加到特定元素。 示例：container: 'body' |
尝试一下 |
| content | string | "" | 指定弹出框主体内的文本 | 尝试一下 |
| delay | number，或 object | 0 | 指定打开和关闭弹出框所需的时间（毫秒）。 要为打开和关闭指定不同的延迟，请使用对象结构 delay: {show: 500, hide: 100} - 打开弹出框需要 500 毫秒，但关闭只需 100 毫秒 |
尝试一下 |
| html | boolean | false | 指定是否接受弹出框中的 HTML 标签
当设置为 false（默认值）时，将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击，请使用此方法 |
尝试一下 |
| placement | string | "right" | 指定弹出框的位置。可能的值
|
尝试一下 |
| selector | string，或 boolean false | false | 将弹出框添加到指定的选择器 | 尝试一下 |
| template | string | 创建弹出框时使用的基本 HTML。 弹出框的标题将被注入到 .popover-header 中。 弹出框的内容将被注入到 .popover-body 中。 .arrow 将成为弹出框的箭头。 最外层的包装元素应该具有 .popover 类。 |
||
| title | string | "" | 指定弹出框的标题文本 | 尝试一下 |
| trigger | string | "click" | 指定如何触发弹出框。可能的值
|
尝试一下 |
| offset | number 或 string | 0 | 弹出框相对于其目标的偏移量 | |
| fallbackPlacement | string 或 array | "flip" | 指定 Popper 在回退时将使用哪个位置 | |
| boundary | string 或 element | "scrollParent" | 弹出框的溢出约束边界。接受值“viewport”、“window”或“scrollParent”，或 HTML 元素 |
弹出框方法
下表列出了所有可用的弹出框方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .popover(options) | 使用选项激活弹出框。有关有效值的详细信息，请参见上面的选项 | 尝试一下 |
| .popover("show") | 显示弹出框 | 尝试一下 |
| .popover("hide") | 隐藏弹出框 | 尝试一下 |
| .popover("toggle") | 切换弹出框 | 尝试一下 |
| .popover("dispose") | 隐藏并销毁弹出框 | 尝试一下 |
| .popover("enable") | 启用弹出框的显示功能。这是默认设置 | |
| .popover("disable") | 删除显示弹出框的功能。只有再次启用弹出框才能显示它 | |
| .popover("toggleEnabled") | 切换弹出框的显示或隐藏功能 | |
| .popover("update") | 更新弹出框的位置 |
弹出框事件
下表列出了所有可用的弹出框事件。
| 事件 | 描述 | 尝试一下 |
|---|---|---|
| show.bs.popover | 当弹出框即将显示时发生 | 尝试一下 |
| shown.bs.popover | 当弹出框完全显示时发生（在 CSS 过渡完成后） | 尝试一下 |
| hide.bs.popover | 当弹出框即将隐藏时发生 | 尝试一下 |
| hidden.bs.popover | 当弹出框完全隐藏时发生（在 CSS 过渡完成后） | 尝试一下 |
| inserted.bs.popover | 在 show.bs.popover 事件之后发生，当弹出框模板已添加到 DOM 时 |
