Bootstrap 5 Tooltip 不支持长按触发，必须设 trigger: 'manual' 并用 JavaScript 监听 touchstart/touchmove/touchend 手动实现，需防系统菜单拦截、滑动误触及兼容性问题。
bootstrap 5 的 tooltip 不支持长按（long press）作为原生触发方式，仅靠 data-bs-trigger 配置无法实现——必须用 javascript 手动接管生命周期。
为什么 data-bs-trigger="click" 在手机上不等于“长按”
移动端点击事件本质是浏览器对 touchend 的模拟，没有持续时间维度。你写 data-bs-trigger="click"，用户点一下就显示、抬手即收，和桌面端 click 行为一致，完全无法区分“轻点”和“长按”。更麻烦的是：
- iOS Safari 和部分 Android WebView 会拦截长按，直接弹系统菜单（复制/翻译），
click事件甚至可能被吞掉 -
focus触发在非表单元素上不稳定，hover在触摸设备上根本不存在 - 即使加了
delay，也只是控制 show/hide 的间隔，不改变触发源本身
手动实现长按：核心是 setTimeout + touchstart/touchend
必须禁用自动触发，改用 trigger: 'manual'，再监听原生触摸事件。关键不是“怎么写定时器”，而是“怎么防误触、防冲突”：
- 一定要在
touchstart里调e.preventDefault()，否则 iOS 会优先响应系统长按菜单 - 必须监听
touchmove并清除定时器——手指滑动一点就算取消长按，不然容易误触发 -
touchend里只负责清理，不调show()；真正显示逻辑只在定时器回调里执行 - 计时阈值建议设为
600–1000ms，太短易误触，太长体验迟钝
示例代码片段：
const el = document.querySelector('[data-bs-toggle="tooltip"]');
const tooltip = new bootstrap.Tooltip(el, { trigger: 'manual' });
let timer = null;
el.addEventListener('touchstart', (e) => {
e.preventDefault();
timer = setTimeout(() => tooltip.show(), 800);
});
el.addEventListener('touchmove', () => {
if (timer) clearTimeout(timer);
timer = null;
});
el.addEventListener('touchend', () => {
if (timer) clearTimeout(timer);
timer = null;
});
容易忽略的兼容性细节
这段逻辑看似简单，但在真实机型上容易翻车：
- 某些 Android 浏览器（如 Samsung Internet）对
touchstart.preventDefault()支持不完整，需配合touch-action: manipulationCSS 属性抑制默认缩放 - 如果 Tooltip 目标元素是动态插入的（比如从 AJAX 渲染），记得在插入后立即初始化
bootstrap.Tooltip实例，并绑定上述事件——不能只初始化一次 - 别忘了在
show()前确保 tooltip 已enable()，尤其元素刚 append 到 DOM 时，否则静默失败 - 如果页面同时用了其他触摸库（如 Hammer.js），注意事件冒泡冲突，必要时在
touchstart里加e.stopPropagation()
长按逻辑的本质不是“让 Tooltip 支持新触发方式”，而是绕过它所有自动机制，用最原始的触摸事件+定时器+手动显隐，把控制权彻底拿回来。任何想省事只改 HTML 属性的做法，都会在真机上失效。
