Bootstrap怎么修改Tooltip提示框在手机端的长按触发显示逻辑及反馈-Bootstrap教程-PHP中文网

bootstrap 5 tooltip 在移动端需手动实现长按触发：先清除 data-bs-trigger 等残留属性，用 trigger: 'manual' 初始化，再通过 touchstart + settimeout + touchmove/touchend 防误触、防系统菜单拦截，并手动补全点击隐藏逻辑。

bootstrap怎么修改tooltip提示框在手机端的长按触发显示逻辑及反馈

Bootstrap 5 的 tooltip 原生不支持长按触发，data-bs-trigger="click" 在手机上只是模拟一次点击，抬手即收，根本达不到“按住 800ms 才显示”的效果。必须用 JavaScript 手动接管生命周期，否则 tooltip 要么不出现、要么闪一下就消失、要么被系统菜单拦截。

为什么 `data-bs-trigger="click"` 在手机上不是长按

移动端没有 hover 状态，click 是浏览器对 touchend 的模拟事件，本身无持续时间维度。你长按按钮，iOS/Android 会优先弹出复制或翻译菜单，甚至直接吞掉事件；:focus 在非表单元素上不稳定，delay 参数对 trigger: "click" 也完全无效——它只影响 hover 和 focus 的延迟。

`trigger: 'manual'` 是前提，否则所有 JS 调用都被忽略

这是最容易翻车的第一步：如果元素上还留着 data-bs-trigger 或 data-bs-title，JS 初始化时会直接覆盖配置，导致 title 变空、show() 静默失败。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

初始化前先清掉残留属性：el.removeAttribute('data-bs-trigger')、el.removeAttribute('data-bs-title')
动态插入的元素（比如 AJAX 渲染后），必须在插入 DOM 后立即调用 new bootstrap.Tooltip(el, { trigger: 'manual' })，不能复用旧实例
如果要更新内容，别改 _config.title，而是先 tooltip.dispose() 再重建新实例

手动实现长按：`touchstart` + `setTimeout` + `preventDefault`

核心不是写定时器，而是防冲突、防误触、防系统抢事件：

touchstart 中必须调 e.preventDefault()，否则 iOS Safari / Samsung Internet 会弹系统菜单
设阈值 800 ms（600–1000 可调），太短易误触，太长用户感知迟钝
必须监听 touchmove 并 clearTimeout，手指滑动哪怕 2px 就取消长按，否则滚动列表时疯狂触发
touchend 只清理定时器，不调 show()——显示逻辑只在 setTimeout 回调里执行

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('touchmove', () => {
  if (timer) { clearTimeout(timer); timer = null; }
});

el.addEventListener('touchend', () => {
  if (timer) { clearTimeout(timer); timer = null; }
});