tooltip被父容器overflow裁剪的典型现象是点击按钮后完全不出现、只显示半截、偏移错位或滚动时突然消失；根本原因是祖先元素设置了overflow: hidden/auto/scroll且position非static，形成裁剪边界；最可靠解法是添加data-bs-container="body"强制挂载到body下脱离裁剪上下文。
Tooltip被父容器overflow裁剪的典型现象
点击按钮后Tooltip完全不出现，或只显示半截、偏移错位、在滚动时突然消失——不是JS没触发，也不是样式没加载，而是它被某个祖先元素的overflow: hidden、overflow: auto或overflow: scroll无声裁掉了。最常出问题的位置是.container、模态框.modal、卡片.card、带滚动的侧边栏，以及任何加了transform的包装节点。
Bootstrap Tooltip必须加data-bs-container="body"
Bootstrap 5+ 的 Tooltip 默认由 Popper 渲染，但它的挂载位置取决于data-bs-container。不设该属性时，Tooltip 会尝试插入到触发元素的直接父级里；一旦该父级（或其任意祖先）满足「position ≠ static + overflow: hidden/auto/scroll」，就会成为包含块兼裁剪边界，Tooltip 就被切掉。
- 最简单可靠的解法：给触发元素加上
data-bs-container="body"，强制 Tooltip 挂到下，彻底脱离所有局部裁剪上下文 - 不要用
data-bs-container=".some-class"——若页面中存在多个匹配元素，Bootstrap 只取第一个，行为不可控 - 若必须指定容器（比如要避开
body上的transform或clip-path），用data-bs-container="#app"这类唯一ID，且确保#app本身没有overflow或transform等隐式创建裁剪边界的行为
为什么加padding或z-index都救不了Tooltip
padding对 Tooltip 无效：Tooltip 是独立 DOM 节点，不在父容器的 padding box 内绘制；z-index也无效：它控制层叠顺序，不解除裁剪——哪怕z-index: 9999，只要还在被overflow: hidden包裹的祖先内，像素就被切了。
- 检查路径上所有祖先节点的 computed 样式，重点看
overflow和position是否同时生效 - 临时删掉可疑节点的
overflow声明，看 Tooltip 是否立刻出现；恢复后即定位准确 - 如果结构受限无法改 DOM 或加
data-bs-container，可用createPortal（React）或teleport（Vue）手动把 Tooltip 移到body下，再用 JS 计算位置
容易被忽略的隐藏裁剪源
真正导致 Tooltip 消失的，往往不是你写的那行overflow: hidden，而是第三方组件、CSS 框架、或 JS 动态注入的样式。比如：
-
.modal内部的overflow: hidden配合transform: translateZ(0)，双重锁定裁剪边界 -
display: flex容器被加上overflow: hidden后，自动成为包含块，内部position: absolute的 Tooltip 就被框死 - 响应式代码在小屏下给
.container动态加overflow: hidden，开发时没复现，上线后用户一缩浏览器就失效
裁剪不是“有没有”，而是“在哪一层”——得顺着 DOM 往上查，而不是在 Tooltip 自身上调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
