Tooltip 的 delay 参数必须用对象形式设置才生效，如 { delay: { show: 300, hide: 100 } }；HTML 中需写成 data-delay='{"show":300,"hide":150}'；Bootstrap 5 要求严格对象格式，数字值会被忽略。
Tooltip 的 delay 参数怎么设才生效
bootstrap 的 tooltip 默认有 0ms 延迟，但直接写 delay: 500 很可能没反应——因为必须用对象形式，且要同时指定 show 和 hide 两个字段。
- 错误写法：
data-delay="500"（HTML 属性不支持数字值，也不区分显隐） - 正确写法：初始化时传入对象，例如
{ delay: { show: 300, hide: 100 } } - 如果只设一个值（如
delay: 300），Bootstrap 会把它同时用在显示和隐藏上，但实际效果常不如预期，尤其隐藏时容易误触 - 使用 data 属性配置时，必须写成
data-delay='{"show":300,"hide":150}'，注意单引号包裹整个 JSON，双引号用于键名和字符串值
jQuery 初始化时设置 delay 的常见翻车点
很多人在 $().tooltip() 里传参后发现延迟无效，问题往往出在初始化时机或重复绑定。
- DOM 元素还没加载完就执行
$('[data-toggle="tooltip"]').tooltip(...)→ 加个$(document).ready()包裹 - 元素是动态插入的（比如 AJAX 加载后追加），需手动重新初始化，或用事件委托替代（但 tooltip 不支持原生委托，得用
$(document).on('inserted.bs.tooltip', ...)配合重绑定） - 同一元素多次调用
.tooltip('dispose')后又初始化，旧的 delay 设置可能残留，建议先 dispose 再全新 init
纯 CSS 能不能改延迟？不能，但能微调动画节奏
delay 是 JS 控制的定时器逻辑，CSS 无法改变触发时机，但可以调整 tooltip 出现/消失的过渡感。
- 默认 tooltip 使用
opacity+transform动画，时长由--bs-tooltip-opacity和--bs-tooltip-fade-duration变量控制（Bootstrap 5.3+） - 想让 tooltip “慢进快出”，可以覆盖 CSS：
:root { --bs-tooltip-fade-duration: 0.3s; } .tooltip.fade.show { opacity: 0.9; transition: opacity 0.3s ease-in, transform 0.2s ease-out; } - 注意：CSS 动画时长 ≠ JS delay。delay 控制“鼠标悬停多久后开始动画”，CSS 控制“动画本身持续多久”
Bootstrap 4 和 5 的 delay 行为差异
升级到 Bootstrap 5 后，delay 的默认行为变严格了，老项目迁移容易出问题。
- Bootstrap 4 允许
delay为数字（如delay: 200），自动同步到 show/hide；5 要求必须是对象，否则静默忽略 - Bootstrap 5 默认禁用
fallbackPlacements，如果 tooltip 因空间不足被重定位，delay 仍按原始触发点计算，可能造成视觉错位感 - 移动端无 hover，
delay对 touch 设备基本无效；想兼容，得配合trigger: 'click focus'手动控制
