bootstrap 5 弹窗被裁剪的根本原因是 data-bs-container 缺失或设置错误，导致浮层挂载到带 overflow:hidden/auto 且非 static 定位的祖先节点中；正确做法是设为 data-bs-container="body" 或唯一 id 容器。
Bootstrap 5 的弹窗（Tooltip、Popover、Dropdown）默认不挂载到 body，而是插入到触发元素的最近有定位的祖先节点里——一旦这个祖先带 overflow: hidden 或 overflow: auto，又恰好不是 position: static，就会成为裁剪边界，内容直接被切掉。
data-bs-container 缺失或设错是根本原因
Bootstrap 5 使用 Popper 渲染浮层，但它的挂载位置由 data-bs-container 控制。不写这个属性时，它会退回到触发元素的 parentNode；而这个父节点常常是 .card、.modal、.container 或某个带 position: relative 的 wrapper —— 这些节点往往同时满足「非 static 定位 + overflow 不为 visible」，构成标准裁剪上下文。
- 现象：Tooltip 完全不出现、Popover 只显示半截、Dropdown 菜单被切掉顶部
- 验证方法：DevTools 中搜索
div.tooltip或div.popover，确认元素存在但不可见；再往上逐级检查 computedoverflow和position - 错误写法：
data-bs-container=".some-class"—— 若页面中有多个匹配，Bootstrap 只取第一个，行为不可控 - 正确写法：
data-bs-container="body"，强制脱离所有局部裁剪上下文
overflow:hidden 不是“样式没生效”，而是它本就该裁剪
overflow: hidden 的规范行为就是创建 BFC 并裁剪溢出内容，包括 box-shadow、position: absolute 子元素、以及 Popper 渲染的浮层。这不是 Bootstrap 的 bug，而是 CSS 布局规则在起作用。
- 加
z-index: 9999没用：层叠顺序不解决裁剪问题 - 加
padding是临时 workaround：把内容“挪进”可视区，但不治本 - 真正要改的是渲染上下文，不是视觉补偿
- 第三方组件（如模态框、轮播、UI 库封装的卡片）常悄悄加
overflow: hidden，你未必能直接改 DOM
指定容器时必须避开 transform/clip-path/opacity
如果项目中 body 有 transform: scale(0.95) 或 clip-path，导致 Tooltip 错位，确实不能硬挂 body。这时需指定一个干净容器，比如 data-bs-container="#app"。
- 但必须确保
#app及其所有祖先都没有overflow、transform、opacity 、<code>will-change等会隐式创建新层叠上下文或裁剪边界的样式 - 用 DevTools 的 «Layout» 面板检查 stacking context 标记，比肉眼查 CSS 更可靠
- 不要用 class 选择器指定容器，ID 才能保证唯一性
真正容易被忽略的，是那些动态注入的 overflow 规则——比如 JS 控制的折叠动画、响应式切换逻辑、甚至某些 UI 库内部的副作用样式。它们不会出现在你的源码里，却足以让 Tooltip 在某个视口宽度下突然消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
