Bootstrap 5.0.2 tooltip的data-bs-delay对象式延迟配置失效问题

Bootstrap 5 读取data-bs-*配置项时，仅会自动转换数值、布尔类简单类型的值，对象类型配置不会自动解析JS对象字面量，只会读取属性的原始字符串值。直接在属性中写data-bs-delay:{show:2000, hide:1000}这类不符合JSON规范的内容时，组件拿到的是字符串类型值，直接触发类型错误；如果属性引号嵌套不符合HTML语法，还会导致HTML解析阶段直接截断属性值，配置完全失效。
纯数值配置data-bs-delay=2000能正常生效，是因为组件会自动把字符串格式的数值转为Number类型，不需要额外解析逻辑。

完全可以直接通过HTML属性配置差异化的显示/隐藏延迟，只需要保证属性值是合法的JSON字符串，同时符合HTML属性的引号嵌套规则即可，两种合法写法如下：

• 外层属性用单引号包裹，内部JSON的键统一用双引号（推荐，写法最简洁）

<div data-bs-toggle="tooltip" data-bs-delay='{"show":2000, "hide":1000}' title="测试tooltip">
  悬停触发
</div>

• 外层属性用双引号包裹时，内部JSON的双引号需要转义为"实体字符

<div data-bs-toggle="tooltip" data-bs-delay="{&quot;show&quot;:2000, &quot;hide&quot;:1000}" title="测试tooltip">
  悬停触发
</div>

注意：JSON语法强制要求对象键必须用双引号包裹，{show:2000}（键无引号）、{'show':2000}（键用单引号）都属于非法JSON格式，组件无法正常解析。

你贴出的测试代码中data-bs-delay的写法本身是完全正确的，在5.0.2版本下可以正常实现2秒显示、1秒隐藏的效果，如果本地运行异常，优先排查三点：

• 页面实际加载的Bootstrap版本是否为5.0.2，有没有被其他资源覆盖为低版本
• 属性代码中有没有混入全角引号、不可见特殊字符
• 有没有其他全局脚本修改了DOM元素的data属性

如果不想处理HTML属性的JSON转义问题，可以直接在JS初始化组件时传入delay配置，不需要依赖jQuery：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    delay: {
      show: 2000,
      hide: 1000
    }
  })
})

这种写法直接传入JS对象，不存在JSON解析、引号冲突问题，稳定性更高。

内容的提问来源于stack exchange，提问作者Greg Greansky