bootstrap 5 tooltip 在手机端无法原生支持长按触发，因移动端无 hover 状态且 click 是 touchend 模拟事件；需用 trigger: 'manual'、touchstart + preventdefault + settimeout + touchmove 清理定时器手动实现，并注意动态元素初始化、data 属性冲突及 popper 动态插入导致的样式权重问题。
Bootstrap 5 的 tooltip 原生不支持手机端长按触发，仅靠 data-bs-trigger="click" 或 delay 参数无法实现“按住 800ms 才显示”的行为——它在移动端就是一次点击+立即隐藏，且容易被系统菜单拦截。
为什么 data-bs-trigger="click" 在手机上不是长按
移动端没有 hover 状态，click 是浏览器对 touchend 的模拟事件，无持续时间维度。你长按按钮，iOS/Android 会优先弹出复制、翻译等原生菜单，tooltip 要么不显示，要么闪一下就消失。更关键的是：focus 在非表单元素上不稳定，hover 在触摸设备上压根不触发。
必须用 touchstart + setTimeout 手动接管生命周期
核心是禁用自动触发、拦截系统菜单、防滑动误触：
-
trigger: 'manual'是前提，否则所有tooltip.show()调用都会被忽略 - 在
touchstart中必须调e.preventDefault()，否则系统菜单会抢事件 - 用
setTimeout(() => tooltip.show(), 800)启动延迟显示，阈值建议 600–1000ms：太短易误触，太长用户感知迟钝 - 必须监听
touchmove并clearTimeout，手指滑动一点就算取消长按，否则滚动列表时极易误触发 -
touchend只负责清理定时器，不调show()——真正显示逻辑只在定时器回调里执行
动态元素和样式适配的常见坑
真实项目里最容易翻车的不是逻辑本身，而是这些细节：
- 元素是 AJAX 插入的？得在插入后立刻初始化
bootstrap.Tooltip实例，并绑定上述事件，不能只初始化一次 - DOM 上还留着
data-bs-trigger或data-bs-title？JS 配置会被覆盖，导致title为空或触发回退到默认值 - 想改字体大小或边框？直接写
.tooltip-inner { font-size: 16px; }很可能无效——因为 tooltip DOM 是 Popper 动态插到底部的，样式权重不够。最可靠方式是用template注入自定义 class，例如class="tooltip my-tooltip-lg"，再写.my-tooltip-lg .tooltip-inner - 改了
line-height或padding？记得同步调整.tooltip-arrow的margin-top（top 方向）或margin-bottom（bottom 方向），否则小三角会偏移
真正麻烦的从来不是写几行 setTimeout，而是事件没 preventDefault 导致系统菜单抢场、定时器没清理造成多次 show() 闪烁、或者样式加在错误的选择器上根本不起作用——这些点漏掉一个，整个长按 tooltip 就会不可靠。
