Tooltip被父元素overflow裁剪的典型现象是点击按钮后完全不出现、只显示半截、偏移错位或滚动时消失，根本原因是祖先节点同时满足position非static且overflow非visible，形成裁剪边界；data-bs-container="body"可强制Tooltip挂载到body下规避此问题。
Tooltip被父元素overflow裁剪的典型现象
点击按钮后Tooltip完全不出现，或只显示半截、偏移错位、滚动时突然消失——不是JS没触发，也不是CSS没加载，而是它被某个祖先节点的overflow: hidden、overflow: auto或overflow: scroll无声裁掉了。
最常出问题的位置是：.container、模态框.modal、卡片.card、带滚动的侧边栏，以及任何加了transform的包装节点。这些容器一旦同时满足「position非static」+「overflow非visible」，就会创建裁剪边界，而Tooltip默认挂载在其触发元素的最近有定位的祖先下，正好掉进这个坑里。
- 用开发者工具选中触发按钮，在Elements面板搜索
div.tooltip，确认元素是否在DOM中存在但不可见 - 往上逐级检查每个祖先的computed样式，重点看
overflow和position是否同时生效 - 临时删掉可疑节点的
overflow声明，看Tooltip是否立刻出现；恢复后即能准确定位问题源
data-bs-container="body"为什么是最可靠解法
data-bs-container控制Tooltip渲染位置，不设时默认挂到触发元素的最近有定位的父级里——这恰恰是裁剪高发区。设成data-bs-container="body"，就强制Tooltip脱离所有局部裁剪上下文，直接挂到<body>下，由Popper基于整个视口计算位置。
- 不要写
data-bs-container=".some-class"——多个匹配时Bootstrap只取第一个，行为不可控 - 若必须指定容器（比如
body上有transform: scale(0.95)导致错位），用唯一ID如data-bs-container="#app"，并确保该容器及其所有祖先都没有overflow或transform -
padding和z-index都救不了它：Tooltip是独立DOM节点，不在父容器的padding box内绘制；z-index再高，只要还在overflow: hidden包裹内，像素就被切了
动态生成元素上Tooltip失效的根源
Tooltip初始化必须在元素插入DOM之后执行，且data-bs-title、data-bs-placement等属性需在调用new bootstrap.Tooltip()前已存在。动态渲染（如React/Vue组件、innerHTML插入、AJAX表格行）容易漏掉这一步。
- 常见错误现象：
tooltip弹出但标题为空、位置始终是top、触发后无响应且控制台无报错 - 正确做法：先设置好所有
data-bs-*属性，再调用new bootstrap.Tooltip(el)；或显式传入配置对象，避开属性读取依赖 - 事件委托无效——Bootstrap Tooltip依赖实例管理生命周期，不能靠
mouseenter监听模拟
Firefox下特别容易暴露裁剪问题
Firefox对position: absolute元素的溢出处理更严格。Chrome有时“宽容”地显示出来，Firefox则按规范直接裁剪。当你发现Tooltip在Chrome正常、Firefox消失或错位，大概率就是某个祖先节点悄悄设置了overflow: hidden或overflow: auto。
尤其注意第三方组件库封装后留下的副作用，比如.card-body、.modal-body或自定义滚动容器，它们的overflow往往不是你写的，而是框架注入的。
真正难排查的，往往是那个没写在你CSS里、却通过JS动态加上的overflow: hidden——它可能来自某个UI组件的初始化逻辑，或者全局样式重置脚本。
