Bootstrap 5 弹出框
弹出框
弹出框组件类似于提示框; 它是一个弹出框，当用户点击某个元素时出现。 不同之处在于弹出框可以包含更多内容。
如何创建弹出框
要创建一个弹出框，请向元素添加 data-bs-toggle="popover" 属性。
使用 title 属性指定弹出框的标题文本，并使用 data-bs-content 属性指定应在弹出框主体中显示的文本
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>
注意： 弹出框必须使用 JavaScript 初始化才能正常工作。
以下代码将启用文档中的所有弹出框
示例
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
亲自试一试 »
弹出框定位
默认情况下，弹出框将出现在元素的右侧。
使用 data-bs-placement 属性设置弹出框在元素顶部、底部、左侧或右侧的位置
示例
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</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>
亲自试一试 »
注意： 如果没有足够的空间，则放置属性无法按预期工作。 例如：如果在页面顶部使用顶部放置（没有空间），它将改为在元素下方或右侧显示弹出框（无论有空间）。
关闭弹出框
默认情况下，当您再次点击该元素时，弹出框会关闭。 但是，您可以使用 data-bs-trigger="focus" 属性，该属性将在点击元素外部时关闭弹出框
示例
<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>
亲自试一试 »
悬停弹出框
提示： 如果您希望在将鼠标指针悬停在元素上时显示弹出框，请使用 data-bs-trigger 属性，其值为 "hover"
示例
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
亲自试一试 »
