必须手动初始化Tooltip插件，data-bs-toggle="tooltip"仅是标记而非开关；需在DOM就绪后执行bootstrap.Tooltip初始化代码，并引入bootstrap.bundle.min.js。
必须手动初始化，否则 data-bs-toggle="tooltip" 完全不生效
很多人写完 html 就以为提示框能直接用，结果悬停半天没反应——根本原因是 bootstrap 5 的 tooltip 是纯 javascript 插件，data-bs-toggle="tooltip" 只是“标记”，不是“开关”。它不会自动扫描并激活，必须显式调用初始化代码。
- 初始化要放在
<body>底部或DOMContentLoaded后，确保 DOM 已就绪 - 推荐写法（兼容性好、语义清晰）：
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); const tooltipList = tooltipTriggerList.map(el => new bootstrap.Tooltip(el)); - 如果只初始化某一个元素，直接写
new bootstrap.Tooltip(document.getElementById("myBtn"))更稳妥 - 别漏掉
bootstrap.bundle.min.js（含 Popper），只引bootstrap.min.js会报Popper is not defined
title 和 data-bs-title 选哪个？
优先用 title 属性。它更轻量、无需额外 JS 配置，且在 Tooltip 初始化失败时仍能作为原生浏览器提示兜底（虽然样式丑，但至少有信息）。
-
data-bs-title仅在需要动态生成内容或避免原生 title 干扰时才用（比如你不想让鼠标悬停时弹两次提示） - 若内容含 HTML（如加粗、换行），必须同时设
data-bs-html="true"，否则标签会被当纯文本渲染 - 注意：
title值为空字符串或空白符时，Tooltip 会静默跳过，不显示也不报错
位置错乱、被裁切、飘到屏幕外？这是 Popper 自动修正的正常行为
Bootstrap 5 默认用 Popper.js 管理 Tooltip 位置，它会根据容器边界、滚动状态、视口空间自动调整方向（比如顶部放不下就切到底部）。这不是 bug，是 feature —— 但容易让人误以为“配置失效”。
- 强制固定方向（如一定要 top）可加
data-bs-placement="top"，但建议只在明确需要时用 - 若想禁用自动翻转，需通过
popperConfig覆盖：new bootstrap.Tooltip(el, { popperConfig: { modifiers: [{ name: 'flip', enabled: false }] } }) - 常见裁切原因：父容器
overflow: hidden或transform触发了新层叠上下文，Tooltip 被截断——检查父级 CSS
触发方式不止 hover，data-bs-trigger 决定交互逻辑
默认是 hover focus（悬停 + 键盘聚焦），但很多场景需要更可控的行为，比如表单校验错误提示得点击才出现，或按钮需长按才提示。
- 常用组合：
data-bs-trigger="click"（点一下显示，再点一下隐藏）、data-bs-trigger="manual"（完全由 JS 控制，适合配合 AJAX 状态） - 移动端无 hover，所以
hover在手机上基本无效；如需兼容，务必加focus或改用click - 延迟显示防误触：
data-bs-delay='{"show": 300, "hide": 100}'，避免快速划过就闪现
<body> 末尾，不受父元素 CSS（比如 z-index、transform）影响——这既是优点也是坑，调试时别在父容器里找它的节点。 
