BS5 Popover 弹出框
学习使用 Popover 组件在点击或悬停时显示附加信息。 · 难度：入门 · +15XP
Popover 简介
Popover 是 Bootstrap 5 中的弹出框组件，类似于 Tooltip，但可以包含更多内容，如标题、文本或按钮。它通过 JavaScript 初始化。
关键配置
| 属性 | 说明 |
|---|---|
data-bs-toggle='popover' | 标记元素为 Popover |
title | 弹出框标题 |
data-bs-content | 弹出框正文内容 |
data-bs-trigger | 触发方式（click/hover/focus） |
代码示例
<button type='button' class='btn btn-secondary' data-bs-toggle='popover' title='标题' data-bs-content='这里是内容。'>点击我</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (el) { return new bootstrap.Popover(el) })
</script>
练习提示
在右侧代码中，初始化所有 Popover。尝试添加 data-bs-trigger='hover' 让弹出框在悬停时显示，而不是点击。