Tooltip被父容器overflow裁剪的解决方法是给触发元素添加data-bs-container="body"，强制其挂载到body下脱离裁剪上下文；若需指定容器，则须确保该容器无overflow:hidden/auto/scroll及transform等触发裁剪的样式。
Tooltip被父容器的overflow裁剪了
Bootstrap Tooltip 默认渲染在触发元素的 body 下（除非显式指定 data-bs-container），但它的定位依赖 Popper 计算位置。一旦 Tooltip 所在的某个祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且 Tooltip 的计算位置落在该容器可视区域之外，就会被直接裁剪——看起来像“没弹出来”，其实只是被藏起来了。
- 最常见于
.container或.container-fluid类：它们默认不设overflow，但若你或第三方样式额外加了overflow: hidden，Tooltip 就会消失 - 也常出现在模态框（
.modal）、卡片（.card）、带滚动的侧边栏等有明确overflow控制的区块内 - 用浏览器开发者工具检查 Tooltip 元素（通常是
div.tooltip）的 computedoverflow值，向上逐级看哪个祖先节点触发了裁剪
如何绕过 overflow 限制
根本解法不是改祖先的 overflow（可能破坏布局），而是让 Tooltip 脱离该容器的渲染上下文：
- 给触发元素加上
data-bs-container="body"，强制 Tooltip 挂载到body下（这是最常用且安全的做法） - 如果必须挂载到特定容器（比如避免被
body的transform或clip-path影响），可指定一个无overflow限制的祖先节点，例如：data-bs-container="#app"，前提是#app确实没有裁剪行为 - 避免使用
data-bs-container=".some-class"这类 class 选择器——若页面中有多个匹配元素，Bootstrap 只取第一个，行为不可控
为什么 .container 类特别容易出问题
很多项目习惯用 .container 包裹整个页面内容，再在其中放 Tooltip 触发按钮。表面看没问题，但一旦该 .container 被 JS 动态添加了 overflow: hidden（比如做动画切换、响应式折叠），或者被其他 CSS 规则间接影响（如 transform 创建新层叠上下文 + overflow 组合），Tooltip 就会失效。知识库中明确提到“不要使用 .container 或 .container-fluid 类包裹”正是源于此链式风险。
真正安全的包裹方式是用一个仅作语义分组、无样式副作用的 <div class="my-section">，并确保它及其所有祖先都没有 <code>overflow 相关声明。
立即学习“前端免费学习笔记（深入）”；
