Bootstrap 4 Tooltip与jQuery SmoothState冲突问题求助

这个场景我之前做项目时也遇到过——smoothState.js通过AJAX替换页面内容时，不会自动清理Bootstrap Tooltip生成的DOM元素和实例，导致旧页面的Tooltip“赖”在新页面上。给你两个直接有效的解决思路：

方法一：利用smoothState的回调钩子处理Tooltip生命周期 #

smoothState提供了多个回调钩子，我们可以在页面切换前后分别销毁旧Tooltip、初始化新Tooltip：

$(function() {
  // 初始化smoothState
  const smoothStateInstance = $('main').smoothState({
    // 开始加载新页面之前，销毁所有旧的Tooltip实例
    onBefore: function() {
      $('[data-toggle="tooltip"]').tooltip('dispose');
    },
    // 新页面内容加载完成后，重新初始化Tooltip
    onAfter: function($container) {
      $container.find('[data-toggle="tooltip"]').tooltip();
    }
  }).data('smoothState');
});

关键说明：

• 使用tooltip('dispose')而不是tooltip('hide')：hide只是隐藏Tooltip，但对应的DOM元素和JS实例还留在文档中；dispose会彻底销毁实例并移除Tooltip的DOM节点，从根源解决残留问题。
• 在onAfter里只初始化新页面内容中的Tooltip：用$container.find()只针对刚加载的新内容初始化，避免重复操作旧元素。

方法二：监听smoothState的状态变化事件 #

如果你的项目里更倾向于用事件监听的方式，也可以监听smoothState的statechange事件来处理：

$(document).on('statechange', function() {
  // 销毁所有旧Tooltip
  $('[data-toggle="tooltip"]').tooltip('dispose');
  // 初始化新页面的Tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

这个方法更灵活，适合需要在多个地方处理页面切换逻辑的场景。

额外注意事项 #

• 确保你的Tooltip初始化代码没有只在页面首次加载时执行一次：AJAX加载的新内容不会自动触发页面初始的$(document).ready()，所以必须在smoothState的回调里重新初始化。
• 检查Tooltip的触发元素是否带有正确的data-toggle="tooltip"属性，避免初始化遗漏。

内容的提问来源于stack exchange，提问作者Ahmad Nazirul