Bootstrap 5中delay必须用对象形式{ show: 300, hide: 100 }才生效，数字值如delay: 300会被静默忽略；HTML中需写成data-bs-delay='{"show":500,"hide":200}'，外层单引号、内层双引号，且键名大小写敏感、值须为整数。
delay必须用对象，数字值在Bootstrap 5里直接被忽略
bootstrap 5对delay参数做了严格校验：传delay: 300这种数字会被静默丢弃，不报错也不生效。真正起作用的只有{ show: 300, hide: 100 }这种对象形式。
HTML中写data-bs-delay时，必须用单引号包裹整个JSON字符串，否则浏览器解析失败：
<button data-bs-toggle="tooltip" title="提示文本" data-bs-delay='{"show":500,"hide":200}'>按钮</button>
- 双引号只能用于JSON内部的键名和字符串值，外层必须是单引号
- 键名
show和hide不能拼错，大小写敏感 - 值必须是整数，
"show": "500"（字符串）也会失效
JS初始化时delay没反应？先查初始化时机和元素状态
很多人写$('[data-bs-toggle="tooltip"]').tooltip({ delay: { show: 400, hide: 150 } })却没效果，问题往往不在配置本身。
- DOM还没加载完就执行初始化 → 用
$(document).ready()包裹，或等DOMContentLoaded事件 - 元素是AJAX动态插入的 → 需手动调用
new bootstrap.Tooltip(el)，不能依赖初始选择器批量绑定 - 同一元素多次初始化又dispose → 旧实例残留可能干扰新配置，建议先
tooltip.dispose()再全新创建 -
trigger设成"click"时show延迟无效 → 点击即触发，延迟只对hover和focus有意义
移动端长按触发要绕过hover，改用touch事件+manual模式
手机端没有hover，原生delay对trigger: "hover"完全无用。必须切换触发逻辑。
关键三步：禁用自动触发、监听touchstart/touchend、手动控制show()：
const el = document.querySelector('#my-btn');
const tooltip = new bootstrap.Tooltip(el, {
trigger: 'manual',
delay: { show: 0, hide: 0 }
});
let timer = null;
el.addEventListener('touchstart', e => {
e.preventDefault();
timer = setTimeout(() => tooltip.show(), 800);
});
el.addEventListener('touchend', () => {
if (timer) clearTimeout(timer);
timer = null;
});
-
trigger: 'manual'是前提，否则touch事件不会进入tooltip流程 -
delay设为{ show: 0, hide: 0 }避免JS层额外延迟干扰触控节奏 -
e.preventDefault()必须加，否则系统长按菜单会弹出，盖住tooltip
别把CSS动画时长和JS delay搞混
delay控制的是“等多久才开始动画”，而.tooltip.fade的CSS过渡控制的是“动画持续多久”。两者完全独立，但常被一起调优。
想实现“慢进快出”，可以这样配合：
:root { --bs-tooltip-fade-duration: 0.3s; }
.tooltip.fade.show {
opacity: 0.95;
transition: opacity 0.3s ease-in, transform 0.2s ease-out;
}
- JS层设
{ show: 500, hide: 50 }→ 悬停半秒后开始淡入，移开立刻开始淡出 - CSS层设
opacity过渡0.3s → 淡入过程拉长，观感更柔和 - 真机测试比桌面更重要：触摸响应延迟、屏幕刷新率、手势误判都会影响最终体验
