Bootstrap禁用Tooltip方法 Bootstrap如何通过JavaScript关闭提示-Bootstrap教程-PHP中文网

tooltip 未初始化就调用 hide() 会报错，需先用 getorcreateinstance() 创建实例；hide() 失效常见于未显示、元素隐藏或延迟未结束；全局关闭应遍历并用 getinstance() 安全调用 hide()；禁用分临时隐藏（hide）和彻底停用（dispose+移除属性）。

tooltip 实例未正确初始化就调用 `hide()`

常见错误是直接对没初始化的 dom 元素调用 bootstrap.tooltip 方法，比如：document.queryselector('.tooltip-el').tooltip('hide') —— 这会报 tooltip is not a function。bootstrap 5+ 不再自动初始化 data-bs-* 属性绑定的 tooltip，必须手动实例化。

正确做法是先获取或创建 Tooltip 实例：

如果已用 data-bs-toggle="tooltip" 标记元素，需先用 bootstrap.Tooltip.getOrCreateInstance() 获取实例
避免重复初始化：多次调用 getOrCreateInstance() 不会报错，但会返回已有实例
不要混用 jQuery 版本（Bootstrap 4）和原生 JS 版本（Bootstrap 5+），函数签名完全不同

const el = document.querySelector('[data-bs-toggle="tooltip"]')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(el)
tooltip.hide()

`tooltip.hide()` 不生效的三个典型场景

即使实例存在，hide() 也可能静默失败：

Tooltip 当前未处于显示状态（比如刚初始化完还没 show() 过），调用 hide() 无效果，也不报错
元素已被移除或 display: none，Tooltip 实例内部检测到不可见时会跳过隐藏逻辑
触发了延迟（delay 配置），而你立即调用 hide() —— 它会被延迟队列拦截，需等 show 延迟结束才真正执行

建议加一层状态判断：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

if (tooltip._isShown) {
  tooltip.hide()
}

关闭所有 Tooltip 的安全方式

全局关闭不能靠遍历后全调 hide()，因为部分实例可能已销毁或未初始化。稳妥做法是只操作当前活跃实例：

用 document.querySelectorAll('[data-bs-toggle="tooltip"]') 找出所有声明了 Tooltip 的元素
对每个元素调用 bootstrap.Tooltip.getInstance(el)（注意不是 getOrCreateInstance），它只返回已存在的实例，避免意外创建
判空后调用 hide()

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
  const tooltip = bootstrap.Tooltip.getInstance(el)
  if (tooltip) tooltip.hide()
})

禁用 Tooltip 的两种本质区别方式

“禁用”不等于“关闭”，要分清意图：

临时隐藏：用 tooltip.hide()，之后仍可 show()
彻底停用：移除 data-bs-toggle="tooltip" 属性 + 销毁实例（tooltip.dispose()），否则实例仍在内存中，且可能响应后续事件
若只是不想让它自动触发，可设 trigger: 'manual' 初始化，这样 hover/click 不再激活，只靠 JS 控制

销毁后记得清空变量引用，尤其在单页应用中防止内存泄漏