data-bs-delay属性必须写成单引号包裹的JSON字符串,如data-bs-delay='{"show":300,"hide":150}'才生效;若只写data-bs-delay="300"或缺hide字段均会静默失效。
data-bs-delay属性怎么写才生效
html 属性 data-bs-delay 必须传 json 字符串,且整个值要用单引号包裹,内部键名和字符串值用双引号——写成 data-bs-delay='{"show":300,"hide":150}' 才能被 bootstrap 5 正确解析。写成 data-bs-delay="300" 或 data-bs-delay='{"show": 300}'(缺 hide)都会静默失效。
JavaScript 初始化时 delay 参数必须是对象
调用 new bootstrap.Tooltip() 或 $().tooltip() 时,delay 选项不能是数字,必须是形如 { show: 500, hide: 100 } 的对象。Bootstrap 5 不再兼容 delay: 300 这种写法,会直接忽略。
- 动态计算延迟?可以:
delay: { show: isMobile ? 800 : 300, hide: 50 } - 只设一个值?不行——
delay: { show: 400 }缺hide字段,整个 delay 配置被丢弃 - 初始化时机错?常见于 DOM 尚未就绪,务必包在
document.addEventListener('DOMContentLoaded', ...)或 jQuery 的$(function() {...})里
delay 不生效的三个隐藏原因
多数“改了 delay 没反应”的问题,其实跟 delay 写法无关:
-
trigger="click"时配show延迟毫无意义——点击瞬间就要显示,delay 不参与 - 父容器有
pointer-events: none或透明遮罩层,悬停事件根本没触发,自然不走 delay 流程 - 元素是 AJAX 动态插入的,但没重新初始化 Tooltip;
inserted.bs.tooltip事件可监听,但得手动调用new bootstrap.Tooltip(el)
CSS 能不能控制 delay
不能。CSS 只能改动画持续时间(比如 --bs-tooltip-fade-duration),不影响 delay 定时器本身。想实现“慢进快出”,得靠 JS 配 { show: 600, hide: 100 },再配合 CSS 调整 transition 的缓动曲线——两者作用域完全不同,混用容易误判效果来源。


















