delay是Bootstrap Tooltip控制显示与隐藏时机的核心配置项,决定触发后延迟多久出现及移开后延迟多久消失,非动画时长或防抖阈值;支持三种写法:HTML单值(不推荐)、JSON字符串(需单引号包裹)、JS对象(最可靠);常见失效原因包括trigger冲突、pointer-events遮挡、初始化过早等;需按场景差异化配置show/hide延迟值,并区分于第三方hoverDelay。

delay 是 Bootstrap 工具提示(Tooltip)控制“显示”和“隐藏”时机的核心配置项,不是动画时长,也不是防抖阈值——它决定的是用户触发后等多久才出现、移开后等多久才消失。
怎么配 delay:三种写法别混用
Bootstrap 支持三种 delay 写法,行为完全不同,混用会失效:
-
data-bs-delay="300":只设一个数字 → 同时作用于 show 和 hide(Bootstrap 5.3+ 已不推荐) -
data-bs-delay='{ "show": 500, "hide": 200 }':JSON 字符串 → 必须用单引号包裹整个值,双引号在内部,否则 HTML 解析失败 - JS 初始化时传对象:
delay: { show: 500, hide: 100 }→ 最可靠,支持变量和动态计算
delay 不生效的常见原因
多数“延时不工作”问题其实和 delay 本身无关,而是触发逻辑被覆盖:
- 同时设置了
trigger="click"还配了show延迟 → 点击瞬间就该显示,show延迟被忽略 - 父容器用了
pointer-events: none或opacity: 0→ 悬停事件根本没触发,自然不走 delay 流程 - Tooltip 初始化太早,DOM 元素还没挂载完成 →
new bootstrap.Tooltip(el)报错或静默失败 - 多个 Tooltip 共享同一个
title属性但未重新启用 → 修改 title 后需调用tooltip.update()
延迟策略要匹配使用场景
桌面端和移动端对延迟的容忍度差异极大,硬套默认值容易翻车:
- 表格行内操作图标(密集型):
{ show: 700, hide: 100 }—— 防误触,且鼠标一移开立刻收起 - 表单必填字段提示(严肃型):
{ show: 0, hide: 300 }—— 失焦即出,但留点时间让用户看清再关 - 移动端触摸屏:
trigger: "focus"+delay: { show: 0 }—— hover 在手机上无意义,focus 更可控 - 数据懒加载列表(如 1000 行):
delay要配合 IntersectionObserver 初始化,否则首屏卡顿明显
和 hoverDelay、delay 容易混淆的兄弟配置
注意:Bootstrap 原生只有 delay;hoverDelay 是第三方插件(如 bootstrap-hover-dropdown)的私有选项,和 Tooltip 无关:
-
hoverDelay(来自bootstrap-hover-dropdown.js):仅控制下拉菜单“悬停后开始展开”的等待时间,默认 0ms -
delay(Bootstrap 官方 Tooltip):控制弹出框“真正显示/隐藏”的时间点,必须搭配trigger使用 - 二者不能混用,强行在 Tooltip 上写
hoverDelay属性完全无效
delay 当成“动画持续时间”去调——它不控制淡入淡出快慢,那是 CSS transition 的事。真正影响体验的,是 show/hide 的决策时机是否贴合用户操作节奏。


















