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 的决策时机是否贴合用户操作节奏。
