Bootstrap Tooltip 需正确引入 CSS、Popper.js 和 JS 文件，添加 data-bs-toggle="tooltip" 与 data-bs-title 属性，并在 DOM 加载后手动初始化实例。

Bootstrap 的 Tooltip（提示气泡）组件可以快速为任意元素添加简洁的文字提示，无需手动写 CSS 或 JS 逻辑。关键是正确引入资源、添加 data 属性，并触发初始化。

确保 Bootstrap 正确加载

Tooltip 依赖 Popper.js 和 Bootstrap 的 JS 文件，不能只引入 CSS。推荐使用 CDN 方式（以 Bootstrap 5 为例）：

• 引入 Bootstrap CSS（含 tooltip 样式）
• 引入 Popper.js（v2，Bootstrap 5 内置依赖，CDN 中已包含）
• 引入 Bootstrap JS（含 tooltip 插件）

示例 HTML head 中的引用：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>

给目标元素添加 data 属性

Tooltip 默认不自动激活，需通过 data-bs-toggle="tooltip" 和 data-bs-title 指定内容。支持多种触发方式（hover、click、focus 等），默认是 hover。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 基础用法：在按钮或链接上加属性即可

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="这是一个提示">悬停看看</button>

• 指定触发方式：比如点击才显示，加 data-bs-trigger="click"
• 设置位置：用 data-bs-placement="top" / "bottom" / "left" / "right"
• 支持 HTML 内容：data-bs-html="true" + data-bs-title 中写 HTML（注意 XSS 安全）

必须手动初始化 tooltip

Bootstrap 5 不会自动初始化所有 tooltip，需要在 JS 中显式调用。通常放在 DOM 加载完成后执行：

<script>
document.addEventListener('DOMContentLoaded', function () {
const tooltipList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipList.map(tooltip => new bootstrap.Tooltip(tooltip))
})
</script>

如果只初始化某一个元素，也可以写成：

new bootstrap.Tooltip(document.getElementById('myButton'))

常见问题与调整建议

• 提示不出现？检查 JS 是否加载成功、是否漏掉初始化代码、浏览器控制台有无报错
• 文字换行或样式异常？可自定义 CSS 类，通过 data-bs-custom-class="my-tooltip" 添加额外样式
• 想动态更新提示内容？调用 instance.setContent({ '.tooltip-inner': '新文字' })
• 关闭 tooltip？调用 instance.hide()；销毁实例？instance.dispose()