Bootstrap5 弹出框（Popovers）

例子: 启用弹出式菜单

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-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>

在线运行

四个方向

共有四个选项：顶部，右侧，底部和左侧对齐。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  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="Right popover">
  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="Bottom popover">
  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="Left popover">
  Popover on left
</button>

在线运行

下次点击时关闭

使用focus（焦点）触发器，在用户下一次点击与切换元素不同的元素时隐藏弹出窗口。

下次单击时关闭的特定标记

为了适应跨浏览器和跨平台行为，你必须使用<a>标签，而不是<button>标签，而且你还必须包含一个tabindex属性。

<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 focus"，这样弹出式窗口就会作为即时的视觉反馈出现在你的用户面前，因为用户可能不会想到会点击一个禁用的元素。

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

在线运行

使用方法

通过 JavaScript 启用弹出框：

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

Making popovers work for keyboard and assistive technology users

To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <span>s) can be made focusable by adding the tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on hover as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.

While you can insert rich, structured HTML in popovers with the html option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the aria-describedby attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.

Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the allowList of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing TAB will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.