当 Bootstrap Tooltip 因父容器 overflow: auto/scroll 导致自动错位（如设为 top 却显示在右侧）时，可通过显式设置 boundary: 'window' 强制限制边界范围，确保 tooltip 按预期方位精准定位。
当 bootstrap tooltip 因父容器 `overflow: auto/scroll` 导致自动错位（如设为 top 却显示在右侧）时，可通过显式设置 `boundary: 'window'` 强制限制边界范围，确保 tooltip 按预期方位精准定位。
Bootstrap Tooltip 在实际项目中常因布局约束出现意料之外的定位偏移——尤其当目标元素（如用户名文本）位于具有 overflow: auto 或 overflow: scroll 的父容器内时。尽管你已明确指定 placement: 'top'，Tooltip 仍可能“退化”显示在右侧，并伴随明显空白间隙。这是因为 Bootstrap 默认将 boundary 设为 'scrollParent'，即 Tooltip 会优先避开滚动容器的可视边界，但在避让过程中会牺牲原始 placement 的语义，转而选择“可用空间最大”的方向（常为 right），而非严格遵循 top。
✅ 正确解法是覆盖默认边界行为，将 boundary 显式设为 'window'（或 'viewport'），使其以整个视口为参考系进行定位计算：
// 初始化 tooltip 时指定 boundary
$('#username').tooltip({
placement: 'top',
boundary: 'window', // 关键：禁用 scrollParent 干扰
trigger: 'hover focus'
});
// 或在 HTML 中通过 data 属性配置（需确保 JS 初始化支持）
<!-- <span id="username" data-toggle="tooltip" data-placement="top" data-boundary="window" title="用户昵称">...</span> -->⚠️ 注意事项：
-
boundary: 'window'要求 Bootstrap v4.2+（v4.6 文档已明确支持）；若使用旧版本，请升级或改用boundary: document.body； - 避免在 tooltip 触发元素上直接设置
position: absolute或transform，这可能干扰 Popper.js（Bootstrap 4+ 底层定位引擎）的坐标计算； - 若页面存在多层嵌套滚动容器，且需更精细控制，可传入 DOM 元素作为 boundary，例如
boundary: document.getElementById('main-container')。
总结：Tooltip 的“智能避让”机制本为优化体验而生，但当它违背设计意图时，主动接管 boundary 选项是最直接、最可控的修复方式。始终优先检查父级容器的 overflow 样式，并在初始化时显式声明 boundary，即可一劳永逸解决 placement 失效问题。
