in English

约夏克布丁

将 Bootstrap 弹出框（如 iOS 中的弹出框）添加到您网站上的任何元素的文档和示例。

概述

使用 popover 插件时要知道的事情：

  • Popovers 依赖 3rd 方库Popper进行定位。您必须在 bootstrap.js 之前包含popper.min.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js其中包含 Popper 才能使弹出框工作！
  • 弹出框需要工具提示插件作为依赖项。
  • 如果您从源代码构建我们的 JavaScript，它需要util.js.
  • 出于性能原因，弹出框是可选的，因此您必须自己初始化它们。
  • 零长度title和content值永远不会显示弹出框。
  • 指定container: 'body'以避免在更复杂的组件（如我们的输入组、按钮组等）中出现渲染问题。
  • 在隐藏元素上触发弹出框将不起作用。
  • .disabledor元素的弹出框disabled必须在包装元素上触发。
  • 当从跨越多行的锚点触发时，弹出框将在锚点的整体宽度之间居中。.text-nowrap在你的 s 上使用<a>以避免这种行为。
  • 在从 DOM 中删除其相应元素之前，必须隐藏弹出框。
  • 可以通过 shadow DOM 中的元素触发弹出框。
默认情况下，该组件使用内置的内容清理器，它会去除任何未明确允许的 HTML 元素。有关更多详细信息 ，请参阅 我们的 JavaScript 文档中的 sanitizer 部分。
该组件的动画效果依赖于 prefers-reduced-motion媒体查询。请参阅 我们可访问性文档的减少运动部分。

继续阅读以了解弹出框如何与一些示例一起使用。

示例：在任何地方启用弹出框

初始化页面上所有弹出框的一种方法是通过它们的data-toggle属性选择它们：

$(function () {
  $('[data-toggle="popover"]').popover()
})

示例：使用container选项

当父元素上的某些样式会干扰弹出框时，您需要指定自定义样式，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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
GPU 加速

由于 GPU 加速和修改的系统 DPI，弹出框有时在 Windows 10 设备上显得模糊。v4 中的解决方法是根据需要在弹出窗口上禁用 GPU 加速。

建议修复：

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

使弹出框适用于键盘和辅助技术用户

要允许键盘用户激活您的弹出框，您应该只将它们添加到传统上可通过键盘聚焦和交互的 HTML 元素（例如链接或表单控件）。尽管可以通过添加属性使任意 HTML 元素（例如<span>s）成为焦点tabindex="0"，但这会为键盘用户在非交互式元素上添加可能令人讨厌和混乱的制表位，并且目前大多数辅助技术不会在这种情况下宣布弹出框的内容. 此外，不要仅仅依靠hover作为弹出框的触发器，因为这将使键盘用户无法触发它们。

虽然您可以使用该选项在弹出框中插入丰富的结构化 HTML html，但我们强烈建议您避免添加过多的内容。弹出框当前的工作方式是，一旦显示，它们的内容就会与具有aria-describedby属性的触发器元素相关联。因此，弹出框的全部内容将作为一个不间断的长流向辅助技术用户公布。

此外，虽然还可以在弹出框中包含交互式控件（例如表单元素或链接）（通过将这些元素添加到whiteList或允许的属性和标签中），但请注意，当前弹出框不管理键盘焦点顺序。当键盘用户打开一个弹出框时，焦点仍然在触发元素上，并且由于弹出框通常不会立即跟随文档结构中的触发器，因此无法保证向前/按下TAB会将键盘用户移动到弹出框本身。简而言之，简单地将交互式控件添加到弹出框可能会使键盘用户和辅助技术用户无法访问/无法使用这些控件，或者至少会导致不合逻辑的整体焦点顺序。在这些情况下，请考虑改用模态对话框。

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-animation="".

请注意，出于安全原因 sanitize， 不能使用数据属性提供 sanitizeFn和 选项。whiteList
姓名 类型 默认 描述
动画 布尔值 真的 对弹出框应用 CSS 淡入淡出过渡
容器 字符串 | 元素 | 错误的 错误的

将弹出框附加到特定元素。示例：container: 'body'。此选项特别有用，因为它允许您将弹出框定位在靠近触发元素的文档流中 - 这将防止弹出框在窗口调整大小期间从触发元素浮动。
内容 字符串 | 元素 | 功能 ''

data-content如果属性不存在，则默认内容值。

如果给定了一个函数，它将被调用，并将其this引用设置为弹出框附加到的元素。
延迟 号码 | 目的 0

延迟显示和隐藏弹出框（毫秒） - 不适用于手动触发类型

如果提供了一个数字，延迟将应用于隐藏/显示

对象结构为：delay: { "show": 500, "hide": 100 }
html 布尔值 错误的 将 HTML 插入弹出框。如果为 false，jQuery 的text方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用文本。
放置 字符串 | 功能 '正确的'

如何定位弹出框 - 自动 | 顶部 | 底部 | 离开 | 正确的。
指定时auto，它将动态地重新定向弹出框。

当一个函数用于确定位置时，它会以弹出框 DOM 节点作为其第一个参数，触发元素 DOM 节点作为其第二个参数来调用。this上下文设置为弹出框实例。
选择器 字符串 | 错误的 错误的 如果提供了选择器，弹出框对象将被委托给指定的目标。在实践中，这用于启用动态 HTML 内容以添加弹出框。请参阅this和一个内容丰富的示例。
模板 细绳 '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

创建弹出框时要使用的基本 HTML。

弹出框title将被注入到.popover-header.

弹出框content将被注入到.popover-body.

.arrow将成为弹出框的箭头。

最外层的包装元素应该有.popover类。
标题 字符串 | 元素 | 功能 ''

title如果属性不存在，则默认标题值。

如果给定了一个函数，它将被调用，并将其this引用设置为弹出框附加到的元素。
扳机 细绳 '点击' 弹出框是如何触发的 - 点击 | 悬停 | 焦点 | 手动的。您可以传递多个触发器；用空格分隔它们。manual不能与任何其他触发器结合使用。
抵消 号码 | 细绳 0 弹出框相对于其目标的偏移量。有关更多信息，请参阅 Popper 的偏移量文档。
后备放置 字符串 | 大批 '翻动' 允许指定 Popper 将在回退时使用的位置。有关更多信息，请参阅 Popper 的行为文档
自定义类 字符串 | 功能 ''

显示时将类添加到弹出框。请注意，除了模板中指定的任何类之外，还将添加这些类。要添加多个类，请用空格分隔它们：'a b'.

您还可以传递一个函数，该函数应返回包含其他类名的单个字符串。
边界 字符串 | 元素 '滚动父' 弹出框的溢出约束边界。接受 、 、 或 HTMLElement 引用的值'viewport'（'window'仅限'scrollParent'JavaScript）。有关更多信息，请参阅 Popper 的preventOverflow 文档。
消毒 布尔值 真的 启用或禁用清理。如果激活'template'，选项将被清理'content'。'title'请参阅我们的 JavaScript 文档中的消毒剂部分。
白名单 目的 默认值 包含允许的属性和标签的对象
sanitizeFn 空 | 功能 无效的 在这里，您可以提供自己的消毒功能。如果您更喜欢使用专用库来执行清理，这会很有用。
popperConfig 空 | 目的 无效的 要更改 Bootstrap 的默认 Popper 配置，请参阅Popper 的配置

单个弹出框的数据属性

如上所述，可以通过使用数据属性来指定单个弹出框的选项。

方法

异步方法和转换

所有 API 方法都是异步的并开始一个转换。他们在转换开始但在结束之前立即返回给调用者。此外，过渡组件上的方法调用将被忽略。

有关更多信息，请参阅我们的 JavaScript 文档。

$().popover(options)

初始化元素集合的弹出框。

.popover('show')

显示元素的弹出框。在弹出框实际显示之前（即在事件发生之前）返回给调用者。shown.bs.popover这被认为是弹出框的“手动”触发。标题和内容都为零长度的弹出框永远不会显示。

$('#element').popover('show')

.popover('hide')

隐藏元素的弹出框。在弹出框实际上被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.popover这被认为是弹出框的“手动”触发。

$('#element').popover('hide')

.popover('toggle')

切换元素的弹出框。在弹出框实际显示或隐藏之前（即在or事件发生之前）返回给调用者。这被认为是弹出框的“手动”触发。shown.bs.popoverhidden.bs.popover

$('#element').popover('toggle')

.popover('dispose')

隐藏和销毁元素的弹出框。使用委托（使用选项创建）的selector弹出框不能在后代触发器元素上单独销毁。

$('#element').popover('dispose')

.popover('enable')

使元素的弹出框能够显示。弹出框默认启用。

$('#element').popover('enable')

.popover('disable')

移除显示元素弹出框的能力。只有重新启用弹出框才能显示。

$('#element').popover('disable')

.popover('toggleEnabled')

切换元素的弹出框是否显示或隐藏。

$('#element').popover('toggleEnabled')

.popover('update')

更新元素弹出框的位置。

$('#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...
})