Bootstrap/docs/4.5/components/popovers
约夏克布丁
用于将Bootstrap弹出窗口（如iOS中发现的）添加到网站上任何元素的文档和示例。
概观
使用popover插件时要了解的事项：
- 弹窗依赖第三方图书馆 Popper.js 用于定位。 你必须包括 popper.min.js 在bootstrap.js之前或使用
bootstrap.bundle.min.js/bootstrap.bundle.js包含Popper.js以便弹出窗口起作用！ - 弹出窗口需要 工具提示插件 作为依赖。
- 如果您是从源代码构建JavaScript, 要求
util.js. - 出于性能原因选择启用弹出式窗口,因此 你必须自己初始化它们 .
- 零长度
titleandcontent值永远不会显示弹出框。 - 指定
container: 'body'以避免在更复杂的组件（例如我们的输入组,按钮组等）中出现渲染问题。 - 在隐藏元素上触发弹出窗口将不起作用。
- 的弹出式窗口
.disabledordisabled元素必须在包装元素上触发。 - 从跨越多行的锚点触发时,弹出窗口将在锚点的整体宽度之间居中。 Use
.text-nowrap在你的<a>避免这种行为。 - 弹出窗口必须先隐藏,然后才能从DOM中删除其相应元素。
- 影子DOM中的一个元素可以触发弹出窗口。
该组件的动画效果取决于 prefers-reduced-motion 媒体查询。 见 辅助功能文档中的慢动部分 .
继续阅读以了解一些示例如何处理弹出窗口。
示例：在各处启用弹出窗口
初始化页面上所有弹出窗口的一种方法是通过弹出窗口选择它们 data-toggle 属性：
示例：使用 container 选项
当您在父元素上使用某些样式来干扰弹出框时,您需要指定一个自定义样式 container 这样弹出式窗口的HTML就会显示在该元素中。
例
<button class="btn btn-lg btn-danger" data-content="And here's some amazing content. It's very engaging. Right?" data-toggle="popover" title="Popover title" type="button"> 单击以切换弹出窗口 </button>四个方向
共有四个选项：顶部,右侧,底部和左侧对齐。
<div class="bd-example-popovers">
<button class="btn btn-secondary" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" type="button"> 顶部弹出框 </button>
<button class="btn btn-secondary" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" data-toggle="popover" type="button"> 右边的弹出框 </button>
<button class="btn btn-secondary" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" data-toggle="popover" type="button"> 底部弹出框 </button>
<button class="btn btn-secondary" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" data-toggle="popover" type="button"> 左侧的弹出框 </button>
</div>下次点击时关闭
使用 focus 触发用户在用户下次单击与切换元素不同的元素时取消弹出窗口。
<a class="btn btn-lg btn-danger" data-content="And here's some amazing content. It's very engaging. Right?" data-toggle="popover" data-trigger="focus" role="button" tabindex="0" title="Dismissible popover"> 可忽略的弹出框 </a>禁用元素
与元素 disabled 属性不是交互式的,这意味着用户无法将鼠标悬停或单击它们来触发弹出窗口（或工具提示）。 解决方法是,您要通过包装器触发弹出窗口 <div> or <span> 并覆盖 pointer-events 在禁用元素上。
对于禁用的弹出触发器,您可能还希望 data-trigger="hover" 这样,弹出式窗口就可以立即显示为用户的视觉反馈,因为他们可能不会期望 点击 在禁用的元素上。
<span class="d-inline-block" data-content="Disabled popover" data-toggle="popover">
<button class="btn btn-primary" disabled="" style="pointer-events: none;" type="button"> 禁用按钮 </button>
</span>用法
通过JavaScript启用弹出窗口：
使弹出窗口对键盘和辅助技术用户有效
要允许键盘用户激活您的弹出框,您应该只将其添加到传统上可键盘聚焦和交互的HTML元素中（例如链接或表单控件）。 尽管任意HTML元素（例如 <span> s）可以通过添加 tabindex="0" 属性,这将为键盘用户在非交互式元素上添加潜在的令人烦恼和令人困惑的制表位,并且在这种情况下,大多数辅助技术目前都不会宣布弹出窗口的内容。 此外,不要仅仅依靠 hover 作为触发弹出式窗口的触发器,因为这将使它们无法为键盘用户触发。
虽然您可以使用 html 选项,我们强烈建议您避免添加过多的内容。 弹出窗口的当前工作方式是,一旦显示,其内容便会通过 aria-describedby 属性。 这样一来,弹出式窗口的全部内容便会以不间断的长时间流向辅助技术用户发布。
此外,虽然可能还会在弹出窗口中包含交互式控件（例如表单元素或链接）（通过将这些元素添加到 whiteList 或允许的属性和标签）,请注意,当前弹出框不管理键盘焦点顺序。 当键盘用户打开弹出窗口时,焦点仍停留在触发元素上,并且由于弹出窗口通常不会立即跟随文档结构中的触发器,因此无法保证前进/按下 TAB 会将键盘用户移至弹出窗口本身。 简而言之,简单地将交互控件添加到弹出框很可能会使键盘用户和辅助技术用户无法访问或无法使用这些控件,或者至少使整个焦点顺序变得不合逻辑。 在这种情况下,请考虑使用模式对话框。
选项
可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data- ,如 data-animation="".
请注意,出于安全原因, sanitize,sanitizeFn and whiteList 选项不能使用数据属性提供。
| Name | Type | 默认 | 描述 |
|---|---|---|---|
| 动画 | 布尔 | true | 将CSS淡入淡出过渡应用于弹出框 |
| 容器 | 假 | 假 | 将弹出框附加到特定元素。 例： container: 'body' 。此选项特别有用,因为它允许您将弹出窗口放置在文档流中靠近触发元素的位置-这将防止在调整窗口大小时弹出窗口从触发元素浮走。
|
| 内容 | 功能 |
默认内容值,如果 如果给出了一个函数,它将被调用 | |
| 延迟 | 编号目的 | 0 |
延迟显示和隐藏弹出窗口（ms）-不适用于手动触发类型 如果提供了数字,则延迟会同时应用于隐藏/显示 对象结构是： |
| html | 布尔 | 假 | 将HTML插入弹出窗口。 如果为假,则为jQuery text 方法将用于将内容插入DOM。 如果您担心XSS攻击,请使用文本。
|
| 放置 | 字符串功能 | '对' |
如何放置弹出框-自动|顶部|底部|左|对。 当使用函数确定放置位置时,将以popover DOM节点作为第一个参数,并以触发元素DOM节点作为第二个参数来调用它。 The |
| 选择 | 字符串假 | 假 | 如果提供了选择器,则将弹出对象委托给指定的目标。 实际上,这用于使动态HTML内容能够添加弹出窗口。 See this and 一个信息丰富的例子 . |
| 模板 | 串 | '<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的 偏移文档 . |
| fallbackPlacement | 字符串数组 | “翻转” | 允许指定Popper在回退时将使用的位置。 Popper.js的 行为文档 |
| 边界 | 字符串元件 | 'scrollParent' | 弹出框的溢出约束边界。 接受的值 'viewport','window','scrollParent' ,或HTMLElement引用（仅JavaScript）。 有关更多信息,请参阅Popper.js的 preventOverflow文档 .
|
| 消毒 | 布尔 | true | 启用或禁用清理。 如果激活 'template','content' and 'title' 选项将被清理。
|
| 白名单 | 宾语 | 默认值 | 包含允许的属性和标签的对象 |
| 消毒 | 功能 | null | 在这里您可以提供自己的清理功能。 如果您更喜欢使用专用库来执行清理操作,那么这将很有用。 |
| popperConfig | 目的 | null | 要更改Bootstrap的默认Popper.js配置,请参阅 Popper.js的配置 |
单个弹出窗口的数据属性
如上所述,可以单独使用数据属性指定各个弹出窗口的选项。
方法
异步方法和转换
所有API方法都是 异步 然后开始 过渡 。转换开始后,他们会立即返回给呼叫者,但 在结束之前 。此外,在 过渡组件将被忽略 .
$().popover(options)
初始化元素集合的弹出窗口。
.popover('show')
显示元素的弹出框。 在弹出窗口实际显示之前返回到调用者 （即 之前 shown.bs.popover 事件发生）。 这被认为是弹出窗口的“手动”触发。 标题和内容均为零长度的弹出窗口永远不会显示。
.popover('hide')
隐藏元素的弹出框。 在弹出窗口实际被隐藏之前返回到调用者 （即 之前 hidden.bs.popover 事件发生）。 这被认为是弹出窗口的“手动”触发。
.popover('toggle')
切换元素的弹出框。 在弹出窗口实际显示或隐藏之前返回到调用者 （即 之前 shown.bs.popover or hidden.bs.popover 事件发生）。 这被认为是弹出窗口的“手动”触发。
.popover('dispose')
隐藏和销毁元素的弹出框。 使用委派的弹出式窗口（使用 the selector 选项 ）无法在后代触发元素上单独销毁。
.popover('enable')
使元素的弹出框能够显示。 默认情况下启用弹出窗口。
.popover('disable')
删除显示元素弹出框的功能。 仅当重新启用弹出窗口后,才能显示该弹出窗口。
.popover('toggleEnabled')
切换显示或隐藏元素的弹出框的功能。
.popover('update')
更新元素弹出框的位置。
活动
| 事件类型 | 描述 |
|---|---|
| show.bs.popover | 当 show 实例方法被调用。
|
| shown.bs.popover | 当弹出窗口对用户可见时将触发此事件（将等待CSS转换完成）。 |
| hide.bs.popover | 当 hide 实例方法已被调用。
|
| hidden.bs.popover | 当向用户隐藏弹出窗口时将触发此事件（将等待CSS转换完成）。 |
| insert.bs.popover | 此事件在 show.bs.popover 将弹出框模板添加到DOM中时发生的事件。
|
