Bootstrap Tooltip 不显示是怎么回事？

♫庆敏提问于 2026-03-22 17:22:19 阅读 65

组件

我按照文档给按钮加了 tooltip，但鼠标悬停完全没反应，控制台也没报错，是不是哪里漏了？

我已经引入了 Bootstrap 的 CSS 和 JS，也加了 data-bs-toggle 属性，但就是不弹出提示。

<button type="button" class="btn btn-primary"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="这是提示内容">
  悬停看提示
</button>

CSS框架响应式框架栅格系统

我来解答赞 6 收藏

反馈

2 条解答

司徒琪帆 Lv1

这问题我也踩过，血泪教训啊。你光引入了 Bootstrap 的 CSS 和 JS 还不够，还得手动初始化 tooltip 组件。

在你的页面加载完成后，得加这么一段 js 代码：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

  return new bootstrap.Tooltip(tooltipTriggerEl)

})

这段代码会遍历所有带 data-bs-toggle="tooltip" 属性的元素并初始化它们。我之前就以为只引入 js 就行了，结果折腾了半天才发现还得这步操作。

另外记得检查下 jQuery 跟 Popper.js 版本兼容性，有时候版本不对也会导致奇怪的问题，不过现在新版本已经把这些问题优化了不少。

搞定这些应该就能正常显示了，别忘了刷新一下页面看看效果。

2026-03-26 08:03

艺童 Lv1

忘了初始化 Tooltip 了，加这个就行

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

  return new bootstrap.Tooltip(tooltipTriggerEl)

})

我之前这样搞的

2026-03-22 17:32