在 GitHub 上查看

弹出框

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

概述

使用弹出框插件时需要注意的事项

  • 弹出框依赖于第三方库 Popper 进行定位。您必须在 bootstrap.js 之前包含 popper.min.js，或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js，才能使弹出框正常工作！
  • 弹出框需要 工具提示插件 作为依赖项。
  • 如果您从源代码构建我们的 JavaScript，则 需要 util.js。
  • 出于性能原因，弹出框是选择加入的，因此您必须自己初始化它们。
  • 零长度title和content值永远不会显示弹出框。
  • 指定container: 'body'以避免在更复杂的组件（例如我们的输入组、按钮组等）中出现渲染问题。
  • 在隐藏元素上触发弹出框不起作用。
  • .disabled或disabled元素的弹出框必须在包装器元素上触发。
  • 当从跨多行的锚点触发时，弹出框将居中于锚点的整体宽度。在<a>上使用.text-nowrap以避免此行为。
  • 在将相应的元素从 DOM 中删除之前，必须隐藏弹出框。
  • 可以触发弹出框，这要归功于阴影 DOM 中的元素。
默认情况下，此组件使用内置内容消毒程序，该消毒程序会删除任何未明确允许的 HTML 元素。有关更多详细信息，请参阅JavaScript 文档中的消毒程序部分。
此组件的动画效果取决于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 元素（例如链接或表单控件）。虽然可以通过添加 tabindex="0" 属性使任意 HTML 元素（例如 <span>）可聚焦，但这会为键盘用户在非交互元素上添加可能令人讨厌且混乱的制表位，并且大多数辅助技术目前不会在此情况下播报弹出框的内容。此外，不要仅仅依赖 hover 作为弹出框的触发器，因为这会让键盘用户无法触发它们。

虽然您可以使用 html 选项在弹出框中插入丰富的结构化 HTML，但我们强烈建议您避免添加过多的内容。弹出框当前的工作方式是，一旦显示，其内容就会通过 aria-describedby 属性与触发元素绑定。因此，弹出框的全部内容将被播报给辅助技术用户，作为一条很长、不间断的流。

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

选项

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

请注意，出于安全原因，sanitize、sanitizeFn 和 whiteList 选项不能使用数据属性提供。
名称 类型 默认值 说明
animation 布尔值 true 对弹出框应用 CSS 渐显过渡
container 字符串 | 元素 | false false

将弹出框附加到特定元素。示例：container: 'body'。此选项特别有用，因为它允许你在触发元素附近的文档流中放置弹出框 - 这将防止弹出框在窗口调整大小时远离触发元素。
content 字符串 | 元素 | 函数 ''

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

如果给定一个函数，它将被调用，其 this 引用设置为弹出框附加到的元素。
delay 数字 | 对象 0

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

如果提供数字，则延迟应用于隐藏/显示

对象结构为：delay: { "show": 500, "hide": 100 }
html 布尔值 false 将 HTML 插入弹出框。如果为 false，则 jQuery 的 text 方法将用于将内容插入 DOM。如果你担心 XSS 攻击，请使用文本。
placement 字符串 | 函数 'right'

如何放置弹出框 - auto | top | bottom | left | right。
当指定 auto 时，它将动态地重新定向弹出框。

当使用函数来确定位置时，它将被调用，其弹出框 DOM 节点作为其第一个参数，触发元素 DOM 节点作为其第二个参数。this 上下文设置为弹出框实例。
selector 字符串 | false false 如果提供选择器，则弹出框对象将委托给指定的 target。实际上，这用于启用动态 HTML 内容以添加弹出框。请参阅 此处 和 一个信息丰富的示例。
template 字符串 '<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 引用设置为弹出框附加到的元素。
触发器 字符串 'click' 弹出框的触发方式 - click | hover | focus | manual。您可以传递多个触发器；用空格分隔它们。manual 不能与任何其他触发器结合使用。
偏移 数字 | 字符串 0 弹出框相对于其目标的偏移量。有关更多信息，请参阅 Popper 的 偏移文档。
fallbackPlacement 字符串 | 数组 'flip' 允许指定 Popper 在回退时将使用哪个位置。有关更多信息，请参阅 Popper 的 行为文档
customClass 字符串 | 函数 ''

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

您还可以传递一个函数，该函数应返回一个包含其他类名的单个字符串。
边界 字符串 | 元素 'scrollParent' 弹出框的溢出约束边界。接受 'viewport'、'window'、'scrollParent' 的值，或一个 HTMLElement 引用（仅限 JavaScript）。有关更多信息，请参阅 Popper 的 preventOverflow 文档。
sanitize 布尔值 true 启用或禁用清理。如果激活 'template'、'content' 和 'title' 选项将被清理。请参阅 JavaScript 文档中的清理部分。
whiteList 对象 默认值 包含允许的属性和标签的对象
sanitizeFn null | 函数 null 您可以在此处提供自己的清理函数。如果您更喜欢使用专用库来执行清理，这将非常有用。
popperConfig null | 对象 null 要更改 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')

切换元素的弹出框。在弹出框实际显示或隐藏之前返回给调用方（即在 shown.bs.popover 或 hidden.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 实例方法时立即触发此事件。
shown.bs.popover 当弹出框对用户可见时触发此事件（将等待 CSS 过渡完成）。
hide.bs.popover 在调用 hide 实例方法时立即触发此事件。
hidden.bs.popover 当弹出框从用户眼前隐藏完毕时触发此事件（将等待 CSS 过渡完成）。
inserted.bs.popover 当弹出框模板添加到 DOM 中时，在 show.bs.popover 事件后触发此事件。 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})