Bootstrap 5 Tooltip 在移动端无法实现长按触发，因 click 触发瞬时闪现、hover 无效、focus 不可靠；必须用 manual 模式配合 touchstart/touchend/touchmove 手动控制定时显示，并清除 data 属性避免配置冲突。
bootstrap 5 的 tooltip 在手机端默认只响应 click（且是“点下即显、抬起即隐”），不支持真正意义上的长按触发——你写的 data-bs-trigger="click" 或 data-bs-trigger="hover" 都无法达成“按住 800ms 后显示”的效果。
为什么移动端不能直接用 data-bs-trigger="click"
因为移动端没有 hover 状态，而 click 触发是瞬时的：手指触摸 → 触发 show → 手指抬起 → 触发 hide。用户根本来不及看到内容，尤其在 iOS Safari 或部分 Android WebView 中，事件还可能被系统长按菜单拦截或吞掉。
-
data-bs-trigger="click"在移动端实际表现是“闪现”，不是“持续显示” - 即使加了
delay，也只是控制 show/hide 动画延迟，不影响触发时机 -
focus在非表单元素上不可靠，hover在触屏设备上完全无效
必须用 manual 模式 + touchstart/touchend 手动控制
放弃纯 HTML 配置，改用 JavaScript 控制生命周期。核心是：监听 touchstart 启动定时器，touchend 清除，超时后调用 tooltip.show()。
- 初始化时必须设
trigger: 'manual'，否则show()会被忽略 -
e.preventDefault()要加在touchstart里，否则系统长按菜单会弹出 - 必须监听
touchmove并清除定时器，防滑动误触（比如用户想滚动页面却意外触发） - 动态插入的元素，得在插入 DOM 后再 new
bootstrap.Tooltip()，否则show()静默失败
const el = document.querySelector('#my-btn');
const tooltip = new bootstrap.Tooltip(el, { trigger: 'manual', placement: 'top' });
let timer = null;
el.addEventListener('touchstart', (e) => {
e.preventDefault();
timer = setTimeout(() => tooltip.show(), 800);
});
el.addEventListener('touchend', () => {
if (timer) clearTimeout(timer);
timer = null;
});
el.addEventListener('touchmove', () => {
if (timer) clearTimeout(timer);
timer = null;
});
data 属性和 JS 初始化别混用
如果元素上还留着 data-bs-trigger 或 data-bs-title，JS 里的配置会被覆盖——title 变空、trigger 回退到默认值，调试时很难发现。
- 要么全用 data 属性（适合静态提示），要么全用 JS 初始化（适合动态/长按场景）
- 用 JS 初始化前，先清掉元素上的
data-bs-trigger、data-bs-title等残留属性 - 如果 tooltip 内容来自 API，必须在
show()前更新tooltip._config.title或重新dispose()再新建实例
长按逻辑本身很简单，但容易栽在事件拦截、定时器未清理、manual 模式没启用这三处。尤其是 touchmove 不处理，用户一滑就触发，体验反而更差。
