data-bs-placement在移动端并非无效，而是需手动响应断点切换：它仅设初始倾向值，实际定位由Popper运行时计算并fallback；须用JS监听resize、重设placement或重建实例，并配合container、boundary及模板类实现精准适配。
data-bs-placement在移动端无效？先确认触发逻辑是否被覆盖
Bootstrap 5 的 data-bs-placement 在响应式场景下本身是静态的——它不随断点自动切换。你写 data-bs-placement="top"，无论屏幕多宽，它都倾向 top；写 "bottom" 就倾向 bottom。所谓“不同断点不同位置”，本质是你需要手动干预，而不是靠属性自动适配。
常见错误现象：在 PC 上设 data-bs-placement="right"，手机上却还是从右边弹，结果被截断或遮挡——这不是 placement 失效，而是 viewport 空间不足触发了 Popper 的 fallback（比如自动切到 left），但你没感知到。
- 别指望
data-bs-placement自带媒体查询能力，它只是初始倾向值 - 如果用 JS 初始化，
placement参数也一样是单值，不会响应 resize - 真正起作用的是 Popper 的运行时计算：空间不够 → fallback → 位置跳变 → 你以为“没生效”
用 JavaScript 动态切换 placement 需监听 resize 和初始化时机
要实现断点切换（比如桌面右、手机底），必须用 JS 判断视口宽度，并在 tooltip 实例化前/后更新 placement。关键不是“改一次”，而是“每次触发前都校准”。
示例逻辑：
function getPlacementForBreakpoint() {
return window.innerWidth < 768 ? 'bottom' : 'right';
}
const el = document.querySelector('[data-bs-toggle="tooltip"]');
const tooltip = new bootstrap.Tooltip(el, {
placement: getPlacementForBreakpoint(),
// 必须禁用 auto，否则 fallback 会覆盖你的判断
fallbackPlacements: []
});
// 触发前重算（hover/click 时）
el.addEventListener('mouseenter', () => {
tooltip._config.placement = getPlacementForBreakpoint();
});
// 或更稳妥：销毁重建
window.addEventListener('resize', () => {
tooltip.dispose();
tooltip = new bootstrap.Tooltip(el, { placement: getPlacementForBreakpoint() });
});
- 不能只靠
window.matchMedia监听，因为 tooltip 可能已在 hover 状态中，需在 show 前重置 - 频繁 dispose/reinit 有性能开销，适合低频触发；高频按钮建议缓存 placement 计算结果
- 移动端 touch 场景下，
mouseenter不可靠，应结合touchstart+show()手动调用
container 和 boundary 联合控制断点下的定位稳定性
单纯换 placement 不解决根本问题：手机端常因滚动容器或 modal 导致 tooltip 错位，此时即使 placement 设对了，DOM 定位锚点错，照样偏移。核心是让 tooltip 和触发元素共享滚动上下文。
- PC 端常用
container: 'body'，但手机端若触发元素在overflow-y: auto的列表里，必须改用container: '.scroll-container' -
boundary: 'window'强制限制在视口内，避免 fallback 后跑出屏幕——尤其在小屏上比'viewport'更可靠 - 模态框（Modal）内 tooltip 必须设
container: '.modal-body'，否则会被overflow: hidden裁剪，且 z-index 截断
断点差异常体现在容器结构上：PC 用 sidebar 布局，手机用垂直流式，所以 container 也要随断点切换，不能写死。
自定义 template + CSS 类实现断点专属样式和箭头位置
placement 切换后，.tooltip-arrow 的方向类（如 .bs-tooltip-bottom）会自动加，但箭头偏移、圆角、阴影等仍需断点适配。直接写 @media (max-width: 767px) 很危险——因为 tooltip DOM 是动态插入 body 底部的，CSS 加载顺序和选择器权重极易失效。
稳妥做法是用 template 注入断点专属 class：
const mobileTemplate = `
<div class="tooltip tooltip-mobile" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
`;
new bootstrap.Tooltip(el, {
template: window.innerWidth < 768 ? mobileTemplate : undefined,
placement: getPlacementForBreakpoint()
});
- 模板里加
tooltip-mobile这类 class，再写.tooltip-mobile .tooltip-inner { font-size: 0.875rem; padding: 6px 12px; }，精准可控 - 避免给
.tooltip-arrow直接设transform或top—— Popper 会覆盖内联样式；改用clip-path或伪元素重绘箭头更稳定 - 深色模式下，断点切换时记得同步更新
.tooltip-inner和.tooltip-arrow的背景色，否则箭头可能隐形
真正容易被忽略的是：断点切换时，tooltip 实例的 _popper 实例不会自动 recompute，必须显式调用 tooltip.update() 或重建实例，否则 placement 和 offset 仍是旧值。
