bootstrap 5 tooltip 在手机端无法长按触发，因移动端无 hover 且 click 是 touchend 模拟事件；须设 trigger: 'manual' 并用 touchstart/touchmove/touchend 手动实现长按逻辑。
Bootstrap 5 的 tooltip 在手机端默认不支持长按触发，data-bs-trigger="click" 只会响应一次点击并立即隐藏，根本达不到“按住 800ms 才显示”的效果。必须用 JavaScript 手动接管生命周期。
为什么 data-bs-trigger="click" 在手机上不是长按
移动端没有 hover 状态，click 是浏览器对 touchend 的模拟事件，无持续时间维度。你长按按钮，系统优先弹出复制/翻译菜单，或者直接当一次点击处理——tooltip 显示后手指一抬就 hide，定位还可能错乱。更麻烦的是：focus 在非表单元素上不稳定，hover 在触摸设备上压根不触发。
手动实现长按：touchstart + setTimeout + preventDefault
核心是禁用自动触发、拦截原生长按、防滑动误触：
-
trigger: 'manual'是前提，否则所有 JS 调用（如tooltip.show()）都会被忽略 - 在
touchstart中必须调e.preventDefault()，否则 iOS/Android 会抢事件弹系统菜单 - 用
setTimeout启动延迟显示，阈值建议600–1000ms；太短易误触，太长用户感知迟钝 - 必须监听
touchmove并clearTimeout，手指稍微滑动就取消长按，否则滚动列表时容易误触发 -
touchend只负责清理定时器，不调show()—— 显示逻辑只在定时器回调里执行
示例代码：
const el = document.querySelector('#my-btn');
const tooltip = new bootstrap.Tooltip(el, { trigger: 'manual', placement: 'top' });
let longPressTimer = null;
el.addEventListener('touchstart', (e) => {
e.preventDefault();
longPressTimer = setTimeout(() => tooltip.show(), 800);
});
el.addEventListener('touchmove', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
});
el.addEventListener('touchend', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
});
容易踩的坑：data 属性残留和动态元素初始化
常见翻车点不在逻辑本身，而在配置冲突和时机问题：
- 元素上若还留着
data-bs-trigger或data-bs-title，JS 初始化时会被覆盖——title变空、trigger回退到默认值，调试时很难发现 - 动态插入的元素（如 AJAX 渲染后）必须在插入 DOM 后立即调用
new bootstrap.Tooltip()，不能依赖初始页面加载时的初始化 - 如果 tooltip 目标是
<div> 这类不可聚焦元素，又用了 <code>trigger: 'focus'，在 Safari 上大概率失焦即收，不如统一走manual模式 -
trigger: 'manual'后，连“点击外部自动隐藏”这种交互也没了，得自己监听document的click事件并调tooltip.hide()
最麻烦的其实是系统级事件拦截和 Popper 动态插入 DOM 带来的样式权重问题——长按逻辑写对了，但 tooltip 内容字体小、箭头偏移、或点击后不消失，往往是因为样式没注入到正确节点，或者事件监听没覆盖到真实渲染后的结构。
