Bootstrap 5 Popover

弹出框

弹出框（Popover）组件类似于工具提示；它是一种弹出框，当用户点击元素时出现。不同之处在于弹出框可以包含更多内容。

如何创建弹出框

如需创建弹出框，请将 data-bs-toggle="popover" 属性添加到元素。

请使用 title 属性规定弹出框的标题文本，并使用 data-bs-content 属性规定在弹出框正文中显示的文本：

Note:弹出框必须用 JavaScript 初始化才能工作。

以下代码将启用文档中的所有弹出框：

Example

Try It Yourself

定位弹出框

默认情况下，弹出框会出现在元素的右侧。

请使用 data-bs-placement 属性设置弹出框在元素顶部、底部、左侧或右侧的位置：

Example

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Dakulo</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Gaba</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>

Try It Yourself

Note:If there is not enough space, the placement property will not work as expected. For example: if you use the top placement property at the top of the page (no reserved space), it will be displayed below or to the right of the element (anywhere there is space).

Close Popover

By default, the popover will close when the element is clicked again. However, you can use data-bs-trigger="focus" Property, setting this property can close the popover when clicked outside the element:

Example

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>

Try It Yourself

Hover Popover

Tip:If you want the popover to be displayed when the mouse pointer is moved over the element, use the value "hover" of data-bs-trigger Property:

Example

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me above</a>

Try It Yourself