移动端长按触发Tooltip需手动控制：设trigger='manual'，用touchstart/touchend+setTimeout管理显示隐藏；样式须通过template注入自定义class并确保权重，避免定位错乱与箭头偏移。
移动端长按触发必须用 JavaScript 手动控制
bootstrap 5 tooltip 原生不支持长按（long press）触发，data-bs-trigger="click" 在手机上只是模拟一次点击，手指抬起就 hide，根本达不到“按住 x 秒才显示”的效果。系统级长按菜单（如复制、翻译）还会抢事件，导致 tooltip 不显示或定位错乱。
必须放弃纯 HTML 配置，改用 touchstart/touchend + setTimeout 手动管理生命周期：
-
trigger: 'manual'是前提，否则所有 JS 调用都会被忽略 - 在
touchstart中调用e.preventDefault()，否则 iOS/Android 会弹出原生菜单 - 设置
longPressTimer = setTimeout(() => tooltip.show(), 800)，800ms 是经验值，太短易误触，太长用户感知延迟 - 监听
touchend和touchmove及时clearTimeout，防滑动误触发 - 动态插入的元素需在
show()前确保已调用tooltip.enable()
修改 Tooltip 字体大小和行高要用 template 选项
直接写 .tooltip-inner { font-size: 16px; } 很可能无效——因为 tooltip DOM 是 Popper 动态插到 底部的，你的样式表加载顺序或选择器权重不够，就会被 Bootstrap 默认样式覆盖。
最可靠的方式是用 template 注入自定义 class：
- 保留
.tooltip和.tooltip-inner这两个关键 class，否则 Popper 定位失效 - 把自定义 class 加在外层容器上，例如：
class="tooltip my-tooltip-lg" - 对应写 CSS：
.my-tooltip-lg .tooltip-inner { font-size: 16px; line-height: 1.5; } - 如果改了
line-height，记得同步调整.tooltip-arrow的margin-top，否则小三角会偏移 - 避免用
max-width硬限制，内容换行时容易撑破布局；推荐用white-space: normal+word-break: break-word
长按 tooltip 显示后，点击外部隐藏要自己加逻辑
启用 trigger: 'manual' 后，Tooltip 完全脱离自动行为，包括“点击外部自动隐藏”这种常见交互也得手动实现。
常见漏掉的点：
- 没监听
document.addEventListener('click', ...)，导致 tooltip 一直挂着 - 没做
event.target排除判断，结果点 tooltip 自身也触发 hide —— 应该只在点击非 tooltip 元素且非触发源时 hide - 没清理定时器，快速连点多次可能触发多个
show()，造成闪烁或重复渲染 - 移动端 touch 事件比 click 更敏感，建议优先监听
touchstart而非click来关闭
样式和交互耦合时容易忽略的细节
字体变大、行高拉高、加 padding 后，tooltip 容器尺寸变化会影响 Popper 的定位计算，但箭头（.tooltip-arrow）不会自动重算位置。
实际开发中最常卡住的地方：
-
.tooltip-arrow的border-color默认继承.tooltip-inner背景色，暗色模式下可能看不见，得单独设 - 加了
border-radius后，箭头边缘会露出来，不是圆角一部分，需用clip-path或重写箭头为伪元素 - 动态内容（比如从 API 拿的 title）若含 HTML，必须显式传
html: true，且服务端返回内容要过滤 XSS - 同一页面多个 tooltip 共用一套样式时，
template里 class 名别写死，最好用 data 属性动态拼接
