bootstrap 5 的 title 属性需配合 data-bs-toggle="tooltip" 并手动初始化 tooltip 实例才生效，仅写 title 不显示提示；须确保 js 加载完整、dom 就绪后初始化、元素可见且非 disabled，并通过 data-bs-* 属性配置样式与行为。
bootstrap 5 的 title 属性不生效？先检查是否加载了 popover 插件
bootstrap 5 默认不自动启用 title 属性的悬停提示，它被归入 tooltip 组件，且必须手动初始化。单纯写 <button title="点我">按钮</button> 不会显示任何提示——这不是 bug，是设计使然。
实操建议：
- 确保已引入 Bootstrap 的 JS 文件（含
tooltip.js或完整bootstrap.bundle.js），bundle版本才自带 Popper 和 Tooltip 依赖 - 在 DOM 加载完成后调用
Tooltip初始化：const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) - HTML 中必须使用
data-bs-toggle="tooltip"+title组合，例如：<button type="button" data-bs-toggle="tooltip" title="这是提示文字">悬停我</button>
为什么加了 data-bs-toggle="tooltip" 还没反应？常见初始化时机和选择器问题
最常踩的坑是 JS 执行太早：DOM 没挂载完就去查 querySelectorAll，结果啥也没找到。另外，title 值为空、含纯空白字符，或元素被 display: none / visibility: hidden 隐藏，都会导致 Tooltip 失效。
实操建议：
- 把初始化代码放在
DOMContentLoaded事件里，或用$(document).ready()（如果用了 jQuery） - 避免对动态插入的元素直接初始化；新元素需单独调用
new bootstrap.Tooltip(el) - 确认元素不是
disabled状态——disabled元素默认不触发mouseenter，Tooltip 就不会出现 - 用浏览器 DevTools 检查元素上是否有
data-bs-original-title属性：初始化成功后，Bootstrap 会把title值移走并存到这个属性里
想自定义样式或位置？别改 title，用 data-bs-* 配置项
Tooltip 的外观和行为全靠 data-bs-* 属性控制，硬改 CSS 类或覆盖 title 属性内容只会失效。比如想让它出现在右侧、带 HTML 内容、延迟显示，都得靠对应参数。
实操建议：
- 位置用
data-bs-placement="right"（可选值："top"/"right"/"bottom"/"left"） - 支持 HTML 内容？加
data-bs-html="true"，再把title换成带标签的字符串，如title="<strong>警告</strong>操作不可逆" - 控制延时：用
data-bs-delay='{"show":500,"hide":100}'（注意是 JSON 字符串格式） - 禁用动画？加
data-bs-animation="false"，但会影响过渡体验，慎用
React/Vue 项目里直接写 data-bs-toggle 无效？得用 ref + 生命周期手动绑定
框架组件的渲染时机和 DOM 生命周期跟原生不同，直接在 JSX 或 template 里写 data-bs-toggle 不会触发初始化。尤其是 React 的函数组件，没有传统 DOM ready 概念。
实操建议：
- React 中用
useRef+useEffect：获取元素 ref，在 effect 里初始化 Tooltip，并在组件卸载时调用dispose() - Vue 3 的
onMounted+ref同理，记得用onBeforeUnmount清理实例，否则可能内存泄漏 - 避免在循环渲染的列表项中为每个元素都新建 Tooltip 实例——性能差；改用事件委托或统一管理实例
- 如果用的是 Bootstrap 官方 React 封装（
react-bootstrap），就别混用原生 data 属性，该用OverlayTrigger组件
实际用的时候，最容易忽略的是 data-bs-toggle="tooltip" 和 title 必须同时存在，缺一不可；还有就是 Tooltip 实例一旦创建，后续改 title 属性不会自动更新——得手动调用 getInstance(el).setContent({ '.tooltip-inner': '新文字' })。
