Bootstrap 5 Tooltip 不原生支持长按触发，移动端需手动实现：监听 touchstart 启动定时器，touchend/touchmove 清除，配合 preventDefault 和 trigger: 'manual' 控制显隐。
手机端长按触发 Tooltip 的默认行为不可靠
bootstrap 5 的 tooltip 默认只响应 hover 和 focus（桌面）或 click（移动端 fallback），但**不原生支持“长按”（long press）作为独立触发方式**。你在手机上“长按”按钮，实际触发的是浏览器的默认长按菜单（如复制、翻译），或者被降级为一次 click，导致 tooltip 闪现即逝、定位错乱，甚至根本不出现在预期位置。
data-bs-trigger="click" 在移动端仍不够用
即使你写了 data-bs-trigger="click"，在 iOS/Android 上也会遇到这些问题：
- 点击后 Tooltip 显示，但手指抬起瞬间就触发
hide—— 因为移动端没有 hover 状态维持机制 - 用户想“长按查看说明”，但 Tooltip 没有延迟显示逻辑，和普通点击无异
- 部分 Android WebView 或 iOS Safari 会拦截长按事件，
click事件本身都可能被吞掉
所以仅靠 HTML 属性配置无法达成“长按 X 秒后显示 Tooltip”的效果。
手动实现长按触发：用 setTimeout + tooltip.show()
必须放弃纯 data 属性驱动，改用 JavaScript 手动控制生命周期。核心思路是：监听 touchstart → 启动计时器 → touchend 前未取消则 show()；同时监听 touchmove 防误触。
示例代码（兼容 Bootstrap 5.3+，无需 jQuery）：
const tooltipEl = document.querySelector('#my-button');
const tooltip = new bootstrap.Tooltip(tooltipEl, {
trigger: 'manual', // 关键：禁用自动触发
placement: 'top',
delay: { show: 0, hide: 0 }
});
let longPressTimer = null;
tooltipEl.addEventListener('touchstart', (e) => {
e.preventDefault(); // 阻止系统长按菜单
longPressTimer = setTimeout(() => {
tooltip.show();
}, 800); // 800ms 后显示，可调
});
tooltipEl.addEventListener('touchend', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
});
tooltipEl.addEventListener('touchmove', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
});
注意点：
-
e.preventDefault()必须加，否则 iOS 会弹出“复制/搜索”菜单，Tooltip 根本没机会 show - 不要依赖
click事件做长按判断——它在移动端太不可控 - 务必设置
trigger: 'manual'，否则tooltip.show()会被内部逻辑忽略 - 如果元素是动态插入 DOM（如表格行、模态框内），这段初始化代码必须在其插入后执行，不能只写在页面加载时
隐藏逻辑要配对，避免残留
长按显示后，用户抬手或滑动离开，Tooltip 不会自动隐藏。你得主动管理：
- 在
touchend或touchmove中调用tooltip.hide()，但别立刻 hide —— 加个短延迟（如 100ms），防止手势抖动误判 - 监听
blur或scroll事件做兜底隐藏（尤其当用户切到其他 tab 或滚动页面时） - 避免多个 Tooltip 实例共存时互相干扰：每个实例用独立变量存
tooltip和longPressTimer，别全局复用
最易被忽略的是：**移动端没有 mouseleave，也没有 reliable 的“离开元素”信号**。靠 touchend 隐藏只是权宜之计，真正健壮的做法是结合 visibilitychange 和 scroll 做清理。
