约夏克布丁
将 Bootstrap 弹出框（如 iOS 中的弹出框）添加到您网站上的任何元素的文档和示例。
使用 popover 插件时要知道的事情：
- Popover 依赖第三方库Popper.js进行定位。您必须在 bootstrap.js 之前包含popper.min.js或使用
bootstrap.bundle.min.js/bootstrap.bundle.js其中包含 Popper.js 才能使弹出框工作！ - 弹出框需要工具提示插件作为依赖项。
- 如果您从源代码构建我们的 JavaScript，它需要
util.js. - 出于性能原因，弹出框是可选的，因此您必须自己初始化它们。
- 零长度
title和content值永远不会显示弹出框。 - 指定
container: 'body'以避免在更复杂的组件（如我们的输入组、按钮组等）中出现渲染问题。 - 在隐藏元素上触发弹出框将不起作用。
.disabledor元素的弹出框disabled必须在包装元素上触发。- 当从跨越多行的锚点触发时，弹出框将在锚点的整体宽度之间居中。
white-space: nowrap;在你的 s 上使用<a>以避免这种行为。 - 在从 DOM 中删除其相应元素之前，必须隐藏弹出框。
继续阅读以了解弹出框如何与一些示例一起使用。
初始化页面上所有弹出框的一种方法是通过它们的data-toggle属性选择它们：
$(function () {
$('[data-toggle="popover"]').popover()
})当父元素上的某些样式会干扰弹出框时，您需要指定自定义样式，container以便弹出框的 HTML 出现在该元素中。
$(function () {
$('.example-popover').popover({
container: 'body'
})
})<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>有四个选项可用：上对齐、右对齐、下对齐和左对齐。
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>使用focus触发器在用户下次单击与切换元素不同的元素时关闭弹出框。
下次单击时关闭所需的特定标记
对于正确的跨浏览器和跨平台行为，您必须使用<a>标签，而不是<button>标签，并且您还必须包含一个tabindex属性。
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>$('.popover-dismiss').popover({
trigger: 'focus'
})具有该disabled属性的元素不是交互式的，这意味着用户无法悬停或单击它们来触发弹出框（或工具提示）。作为一种解决方法，您需要从包装器中触发弹出框，<div>或者<span>覆盖pointer-events禁用元素上的 。
对于禁用的弹出框触发器，您可能还希望data-trigger="hover"弹出框显示为用户的即时视觉反馈，因为他们可能不希望单击禁用的元素。
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>通过 JavaScript 启用弹出框：
$('#example').popover(options)选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-animation="".
| 姓名 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 动画 | 布尔值 | 真的 | 对弹出框应用 CSS 淡入淡出过渡 |
| 容器 | 字符串 | 元素 | 错误的 | 错误的 | 将弹出框附加到特定元素。示例： |
| 内容 | 字符串 | 元素 | 功能 | '' |
如果给定了一个函数，它将被调用，并将其 |
| 延迟 | 号码 | 目的 | 0 | 延迟显示和隐藏弹出框（毫秒） - 不适用于手动触发类型 如果提供了一个数字，延迟将应用于隐藏/显示 对象结构为： |
| html | 布尔值 | 错误的 | 将 HTML 插入弹出框。如果为 false，jQuery 的text方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用文本。 |
| 放置 | 字符串 | 功能 | '正确的' | 如何定位弹出框 - 自动 | 顶部 | 底部 | 离开 | 正确的。 当一个函数用于确定位置时，它会以弹出框 DOM 节点作为其第一个参数，触发元素 DOM 节点作为其第二个参数来调用。 |
| 选择器 | 字符串 | 错误的 | 错误的 | 如果提供了选择器，弹出框对象将被委托给指定的目标。在实践中，这用于启用动态 HTML 内容以添加弹出框。请参阅this和一个内容丰富的示例。 |
| 模板 | 细绳 | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
创建弹出框时要使用的基本 HTML。 弹出框 弹出框
最外层的包装元素应该有 |
| 标题 | 字符串 | 元素 | 功能 | '' |
如果给定了一个函数，它将被调用，并将其 |
| 扳机 | 细绳 | '点击' | 弹出框是如何触发的 - 点击 | 悬停 | 焦点 | 手动的。您可以传递多个触发器；用空格分隔它们。`manual` 不能与任何其他触发器结合使用。 |
| 抵消 | 号码 | 细绳 | 0 | 弹出框相对于其目标的偏移量。有关更多信息，请参阅 Popper.js 的偏移量文档。 |
| 后备放置 | 字符串 | 大批 | '翻动' | 允许指定 Popper 将在回退时使用的位置。有关更多信息，请参阅 Popper.js 的行为文档 |
| 边界 | 字符串 | 元素 | '滚动父' | 弹出框的溢出约束边界。接受 、 、 或 HTMLElement 引用的值'viewport'（'window'仅限'scrollParent'JavaScript）。有关更多信息，请参阅 Popper.js 的preventOverflow 文档。 |
单个弹出框的数据属性
如上所述，可以通过使用数据属性来指定单个弹出框的选项。
初始化元素集合的弹出框。
显示元素的弹出框。在弹出框实际显示之前（即在事件发生之前）返回给调用者。shown.bs.popover这被认为是弹出框的“手动”触发。标题和内容均为零长度的弹出框永远不会显示。
$('#element').popover('show')隐藏元素的弹出框。在弹出框实际上被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.popover这被认为是弹出框的“手动”触发。
$('#element').popover('hide')切换元素的弹出框。在弹出框实际显示或隐藏之前（即在or事件发生之前）返回给调用者。这被认为是弹出框的“手动”触发。shown.bs.popoverhidden.bs.popover
$('#element').popover('toggle')隐藏和销毁元素的弹出框。使用委托（使用选项创建）的selector弹出框不能在后代触发器元素上单独销毁。
$('#element').popover('dispose')使元素的弹出框能够显示。弹出框默认启用。
$('#element').popover('enable')移除显示元素弹出框的能力。只有重新启用弹出框才能显示。
$('#element').popover('disable')切换元素的弹出框是否显示或隐藏。
$('#element').popover('toggleEnabled')更新元素弹出框的位置。
$('#element').popover('update')| 事件类型 | 描述 |
|---|---|
| show.bs.popover | show调用实例方法时立即触发此事件。 |
| 显示的.bs.popover | 当弹出框对用户可见时触发此事件（将等待 CSS 转换完成）。 |
| hide.bs.popover | hide调用实例方法时立即触发此事件。 |
| hidden.bs.popover | 当弹出窗口完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。 |
| 插入的.bs.popover | 该事件show.bs.popover在弹出框模板添加到 DOM 后触发。 |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})