Bootstrap 5 的 title 属性默认不生效，需显式初始化 Tooltip；必须引入 tooltip.js、添加 data-bs-toggle="tooltip"，并在 DOM 加载后调用 new bootstrap.Tooltip() 初始化。
Bootstrap 5 的 title 属性失效了？
bootstrap 5 默认不自动初始化原生 title 提示，直接写 title="提示文字" 不会显示 tooltip。这不是 bug，是设计选择——tooltip 必须显式初始化，否则 dom 中的 title 属性会被忽略（甚至被移除）。
常见错误现象：title 属性在 HTML 里写了，鼠标悬停没反应；或者用 JS 初始化后，title 消失了，但 Tooltip 还是不出现。
- 必须引入 Bootstrap 的
tooltip.js（或完整bootstrap.bundle.js），纯 CSS 版本不行 - 元素需有
data-bs-toggle="tooltip"属性，仅靠title不够 - 初始化前不能隐藏元素（比如
display: none），否则定位计算失败
怎么手动初始化 Tooltip（最简可用方案）
别依赖自动初始化，自己调用 bootstrap.Tooltip 最稳。尤其适合动态插入的元素或单页应用。
实操建议：
- 确保 DOM 加载完成后再执行，比如放在
DOMContentLoaded事件里 - 用
document.querySelectorAll('[data-bs-toggle="tooltip"]')批量初始化，避免漏掉 - 如果元素是后来加的（如 AJAX 渲染），要对新节点单独调用
new bootstrap.Tooltip(el)
示例代码：
document.addEventListener('DOMContentLoaded', () => {
const tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.map(tooltipTriggerEl => {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
});
自定义触发方式和位置（不只是 hover）
默认是 hover focus，但实际项目常需要只 hover、或加 click、甚至禁用 focus（避免键盘用户误触）。
关键参数：
-
data-bs-trigger：设为"hover"就只响应鼠标，"click"则点开，"manual"完全由 JS 控制 -
data-bs-placement：可选"top"/"bottom"/"left"/"right"，注意这是相对于触发元素的位置，不是视口 -
data-bs-delay：接受对象格式，如{ "show": 300, "hide": 100 }，单位毫秒
示例（只 hover、底部显示、带延迟）：
<button type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="bottom"
data-bs-delay='{"show":200,"hide":0}'
title="这是底部提示">
悬停我
</button>
为什么 Tooltip 有时不显示或错位？
核心原因就两个：定位上下文破坏 + 初始化时机不对。不是样式问题，别急着改 CSS。
常见坑点：
- 父容器用了
transform、perspective或will-change—— 这会让 Tooltip 的position: absolute相对于该容器定位，导致飞出屏幕。解法：给父容器加transform: none或换用container: "body" - Tooltip 初始化后修改了元素尺寸（比如图片加载完成），但没调用
tooltip.update()，位置就偏了 - 用了 Popper 的
boundary但没指定有效值，导致被裁剪。默认boundary: "clippingParents"，一般够用，别乱改
修复错位的最小动作：tooltip.update()（拿到实例后调），或初始化时加 container: "body" 选项。
复杂点在于，Tooltip 依赖 Popper 做计算，而 Popper 对 CSS 变换、滚动容器、Shadow DOM 都敏感——这些地方一动，就得重新评估定位逻辑，不是加个 class 能解决的。
