Bootstrap 4 点击按钮调用tooltip('hide')无效，如何禁用与重开工具提示

你之前的代码之所以达不到预期效果，核心是混淆了Tooltip组件不同方法的作用：

• tooltip('hide')仅负责收起当前已经展示在页面上的提示弹窗，执行完成后不会修改tooltip的触发监听逻辑，鼠标重新悬停元素时，提示框依然会正常弹出，完全不具备“禁用交互”的能力。
• 如果你需要彻底关停交互后再重新恢复，没有办法在实例失效的状态下直接通过show方法唤出组件，因为所有关联的事件绑定、配置都已经被清理了。

Bootstrap 4 官方为Tooltip组件提供了专门适配“临时禁用/恢复交互”场景的方法，根据你的使用场景可以二选一：

方案1：使用内置disable/enable方法（推荐） #

这组方法的设计目的就是临时控制组件的交互开关，不需要重复初始化，性能更优：

• 调用tooltip('disable')会给对应元素的tooltip实例打上禁用标记，后续所有触发行为（悬停、聚焦等）都不会再弹出提示；如果当前有正在展示的提示框，方法会自动完成收起，不需要额外调用hide。
• 调用tooltip('enable')会移除之前的禁用标记，直接恢复tooltip的全部触发逻辑，不需要重新初始化组件。

修正后的代码：

// 页面加载后统一初始化所有标记了data-toggle="tooltip"的元素
$('[data-toggle="tooltip"]').tooltip();

$('.remove-tooltip').click(function(){
  // 彻底关停对应元素的tooltip交互，替代原代码中的hide方法
  $('.left-menu a').tooltip('disable');
});

$('.add-tooltip').click(function(){
  // 恢复对应元素的tooltip交互，替代原代码中的show方法
  $('.left-menu a').tooltip('enable');
});

方案2：销毁实例+重新初始化（适合需要彻底清理资源的场景） #

如果需要完全移除tooltip的所有关联事件、DOM节点，可以使用dispose方法彻底销毁实例，在需要时再重新绑定：

• 点击移除按钮时，调用tooltip('dispose')：移除元素上所有和tooltip相关的事件监听，清理关联的DOM节点，完全释放组件占用的资源。
• 点击添加按钮时，重新执行tooltip()初始化流程，给元素重新绑定完整的tooltip逻辑。

对应代码：

$('[data-toggle="tooltip"]').tooltip();

$('.remove-tooltip').click(function(){
  // 彻底销毁对应元素的tooltip实例
  $('.left-menu a').tooltip('dispose');
});

$('.add-tooltip').click(function(){
  // 重新初始化对应元素的tooltip组件
  $('.left-menu a').tooltip();
});

• 不要混用不同生命周期的方法：如果已经对元素执行了dispose销毁实例，就不能再对这个元素直接调用show/hide/disable等方法，否则会抛出组件未初始化的错误，必须重新执行初始化后才能正常调用。
• 针对页面动态插入的元素，需要等元素渲染到DOM中之后再执行tooltip初始化，不能在全局脚本加载时给还不存在的元素绑定组件。

内容的提问来源于stack exchange，提问作者Rohit Verma