在GitHub上查看

PoP提示

用于将Bootstrap弹出窗口（如iOS中发现的）添加到网站上任何元素的文档和示例。

本页导航↓

概述

使用popover插件时要了解的事项：

弹出窗口依靠第三方库Popper进行定位。您必须在bootstrap.js之前包含 popper.min.js 或使用包含Popper的 bootstrap.bundle.min.js / bootstrap.bundle.js 才能使弹出窗口起作用！
弹出窗口需要工具提示插件作为依赖项。
由于性能原因，弹出窗口是可选的，因此您必须自己对其进行初始化。
零长度 title 和 content 值将永远不会显示弹出框。
指定 container: 'body' 以避免在更复杂的组件（例如我们的输入组，按钮组等）中呈现问题。
在隐藏元素上触发弹出窗口将不起作用。
.disabled 或 disabled 元素的弹出窗口必须在wrapper元素上触发。
从跨越多行的锚点触发时，弹出窗口将在锚点的整体宽度之间居中。在您的 <a> 上使用 .text-nowrap 可以避免这种情况。
弹出窗口必须先隐藏，然后才能从DOM中删除其相应元素。
阴影DOM中的一个元素可以触发弹出窗口。

此组件的动画效果依赖于 prefers-reduced-motion 媒体查询。请参阅我们的档可访问的reduce motion文档部分。

继续阅读以了解一些示例如何处理弹出窗口。

启用弹出窗口

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

使用容器选项

当你在父元素上有一些样式干扰了弹出窗口时，你需要指定一个自定义 container ，这样弹出窗口的HTML就会出现在该元素中。

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})

示例

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四个方向

共有四个选项：顶部，右侧，底部和左侧对齐。在RTL中使用Bootstrap时，会镜像方向。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>

关闭提示

使用 focus 触发器可消除用户下次单击与切换元素不同的元素的弹出窗口。

单击鼠标右键时需要特定的标记

为了实现正确的跨浏览器和跨平台行为，必须使用 <a> 标记而不是 <button> 标记，并且还必须包括 tabindex属性。

Dismissible popover

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})

禁用提示。

具有 disabled 属性的元素不是交互式的，这意味着用户无法悬停或单击它们来触发弹出窗口（或工具提示）。解决方法是，您要从包装 <div> 或 <span> 触发弹出窗口，并覆盖禁用元素上的 pointer-events。

对于禁用的弹出式触发器，您可能还希望使用 data-bs-trigger="hover" ，这样弹出式窗口会立即显示给用户，因为他们可能不希望单击禁用的元素。

<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

用法

通过JavaScript启用弹出窗口：

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

使弹出窗口对键盘和辅助技术用户有效

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

尽管您可以使用html选项在弹出窗口中插入丰富的结构化 html ，但我们强烈建议您避免添加过多的内容。弹出窗口当前工作的方式是，一旦显示，其内容将通过 aria-describedby 属性绑定到触发元素。这样一来，弹出式窗口的全部内容就会以不间断的长时间流向辅助技术用户宣布。

此外，虽然还可以在popover中包含交互式控件（如表单元素或链接）（通过将这些元素添加到允许的属性和标记的 allowList 中），但请注意，当前popover不管理键盘焦点顺序。当键盘用户打开弹出窗口时，焦点仍然是触发元素，并且由于弹出窗口通常不会立即跟随文档结构中的触发器，因此无法保证向前移动/按 TAB 键会将键盘用户移动到弹出窗口本身。对于用户来说，添加这些交互控件是不可能的，至少对于用户来说，添加这些控件是不合理的。在这些情况下，请考虑改用模态对话框。

选项

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

请注意，出于安全原因，不能使用数据属性提供sanitize, sanitizeFn, 和 allowList 选项。

名字	类型	默认	描述
`animation`	boolean	`true`	将CSS淡入淡出过渡应用于弹出框
`container`	string \| element \| false	`false`	将弹出框附加到特定元素。示例： `container: 'body'`。此选项特别有用，因为它允许您将弹出窗口放置在文档流中靠近触发元素的位置-这将防止在调整窗口大小时弹出窗口从触发元素浮动。
`content`	string \| element \| function	`''`	如果不存在 `data-bs-content` 属性，则为默认内容值。如果给出了一个函数，则将 `this` 对带有弹出框的元素的此引用集进行调用。
`delay`	number \| object	`0`	延迟显示和隐藏弹出窗口（ms）-不适用于手动触发类型如果提供了编号，则延迟会同时应用于隐藏/显示对象结构是: `delay: { "show": 500, "hide": 100 }`
`html`	boolean	`false`	将HTML插入弹出窗口。如果为false，则将使用 `innerText` 属性将内容插入DOM。如果您担心XSS攻击，请使用文本。
`placement`	string \| function	`'right'`	如何放置弹出框-- auto \| top \| bottom \| left \| right。指定 `auto` 时，它将动态调整弹出框的方向。当使用函数确定放置位置时，将以popover DOM节点作为第一个参数，并以触发元素DOM节点作为第二个参数来调用它。 `this` 上下文设置为弹出实例。
`selector`	string \| false	`false`	如果提供了选择器，则将弹出对象委托给指定的目标。实际上，这用于使动态HTML内容能够添加弹出窗口。请参阅 this和一个信息示例。
`template`	string	`'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	创建弹出框时要使用的基本HTML。弹出窗口的 `title` 将注入到 `.popover-header`中。弹出窗口的 `content` 将注入到 `.popover-body` 中。 `.popover-arrow` 将成为弹出框的箭头。最外面的包裹的元素应具有 `.popover` 类。
`title`	string \| element \| function	`''`	如果没有 `title` 属性，则为默认标题值。如果给出了一个函数，则将其对带有弹出框的元素的 `this` 引用集进行调用。
`trigger`	string	`'click'`	如何触发弹出窗口 - click \| hover \| focus \| manual。您可以传递多个触发器；用空格分隔它们。 `manual` 不能与任何其他触发器组合使用。
`offset`	number \| string	`0`	弹出框相对于目标的偏移量。有关更多信息，请参阅Popper的 offsets文档。
`fallbackPlacement`	string \| array	`'flip'`	允许指定Popper在回退时将使用的位置。有关更多信息，请参阅Popper的 behavior 文档
`boundary`	string \| element	`'scrollParent'`	弹出框的溢出约束边界。接受 `'viewport'`， `'window'` ， `'scrollParent'` 或HTMLElement引用的值（仅JavaScript）。有关更多信息，请参阅Popper的 preventOverflow 文档。
`customClass`	string \| function	`''`	在弹出窗口上添加类。请注意，除了模板中指定的任何类之外，还将添加这些类。要添加多个类，请用空格分隔它们： `'class-1 class-2'`。您还可以传递一个函数，该函数应返回包含其他类名的单个字符串。
`sanitize`	boolean	`true`	启用或禁用清理。如果激活了 `'template'`，则 `'content'` 和 `'title'` 选项将被清除。
`allowList`	object	Default value	包含允许的属性和标签的对象
`sanitizeFn`	null \| function	`null`	在这里您可以提供自己的清理功能。如果您更喜欢使用专用库来执行清理操作，这将很有用。
`popperConfig`	null \| object	`null`	要更改Bootstrap的默认Popper配置，请参阅Popper的配置

单个弹出窗口的数据属性

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

方法

异步方法和转换

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

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

展示

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

myPopover.show()

隐藏

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

myPopover.hide()

切换

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

myPopover.toggle()

处置

隐藏和销毁元素的弹出框（删除DOM元素上存储的数据）。使用委派的弹出窗口（使用 selector 选项创建）不能在后代触发器元素上单独销毁。

myPopover.dispose()

启用

使元素的弹出框能够显示。默认情况下启用弹出窗口 。

myPopover.enable()

禁用

删除显示元素弹出框的功能。仅当重新启用弹出窗口时，才能显示该弹出窗口。

myPopover.disable()

切换器

切换显示或隐藏元素的弹出框的功能。

myPopover.toggleEnabled()

更新

更新元素弹出框的位置。

myPopover.update()

获取实例

允许您获取与DOM元素关联的popover实例的静态方法

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

事件

事件类型	描述
show.bs.popover	调用 `show` 实例方法时，将立即触发此事件。
shown.bs.popover	当弹出窗口对用户可见时将触发此事件（将等待CSS转换完成）。
hide.bs.popover	调用 `hide` 实例方法后，立即触发此事件。
hidden.bs.popover	当向用户隐藏弹出窗口时将触发此事件（将等待CSS转换完成）。
inserted.bs.popover	当将弹出框模板添加到DOM时，在 `show.bs.popover` 事件之后触发此事件。

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})