悬浮提示 Tooltips

悬浮提示用于在用户悬停、聚焦或点击元素时弹出一段补充说明。它依赖 Popper 定位(已内置在 bundle 中),通过 data-bs-toggle="tooltip" 声明,由壳内脚本统一初始化。

四个方向

用 data-bs-placement 指定提示框出现在触发元素的上、右、下、左四个方向;默认方向为上方。把鼠标悬停在按钮上试试。

HTML 示例

HTML 内容

加上 data-bs-html="true",data-bs-title 中的 HTML 标签就会被原样渲染,而不是转义成纯文本。

HTML 示例

禁用元素

被 disabled 的按钮不可交互,无法触发提示。官方做法是用一个外层 <span> 包裹按钮,并把 data-bs-toggle="tooltip" 放在外层 span 上(建议加 tabindex="0" 便于键盘聚焦)。

HTML 示例

触发方式

默认触发为 hover focus。通过 data-bs-trigger 可改为 click(点击切换显示/隐藏)或 focus(聚焦时显示,移开焦点后隐藏)。

HTML 示例