Bootstrap删除按钮同时启用Confirmation与Tooltip功能问题求助

嘿，这个问题我之前也碰到过——bootstrap-confirmation 和 Bootstrap Tooltip 撞车主要是因为两个插件都盯上了元素的事件绑定，再加上你在同一个按钮上重复写了data-toggle属性（HTML里重复属性是无效的，浏览器只会识别第一个），所以Tooltip就没机会生效了。给你几个实测有效的解决方案：

方案1：拆分属性，手动初始化Tooltip #

首先把按钮上重复的data-toggle="tooltip"删掉，换成自定义属性存储Tooltip的提示内容，比如data-tooltip，然后分别初始化两个插件：

修改后的按钮代码 #

<button class="btn btn-outline-danger btn-sm mr-2" 
        data-toggle="confirmation" 
        data-placement="top"
        data-tooltip="点击删除这条记录">
  <i class="fas fa-trash"></i>
</button>

调整后的JS代码 #

$(function() {
  // 先初始化confirmation插件
  $('[data-toggle=confirmation]').confirmation({
    rootSelector: '[data-toggle=confirmation]',
    popout: true,
    btnOkClass: 'btn-success',
  });
  
  // 再初始化Tooltip，用自定义的data-tooltip属性获取提示文本
  $('[data-tooltip]').tooltip({
    title: function() {
      return $(this).attr('data-tooltip');
    },
    placement: $(this).attr('data-placement') || 'top' // 复用已有的位置属性
  });
});

方案2：利用confirmation的回调触发Tooltip #

有些版本的confirmation会修改元素的DOM结构，导致Tooltip绑定失效，这时可以借助confirmation的初始化回调，在插件加载完成后再绑定Tooltip：

$(function() {
  const $deleteBtn = $('[data-toggle=confirmation]');
  
  $deleteBtn.confirmation({
    rootSelector: '[data-toggle=confirmation]',
    popout: true,
    btnOkClass: 'btn-success',
    // 初始化完成后立即绑定Tooltip
    onInit: function() {
      $(this.element).tooltip({
        placement: 'top',
        title: '点击删除这条记录'
      });
    }
  });
});

方案3：避免事件委托冲突 #

如果你的confirmation用了委托事件（rootSelector配置），可以尝试关闭委托或者调整绑定顺序，同时给Tooltip加个小延迟确保它在confirmation之后加载：

$(function() {
  $('[data-toggle=confirmation]').confirmation({
    rootSelector: '[data-toggle=confirmation]',
    popout: true,
    btnOkClass: 'btn-success',
    singleton: false, // 允许同时触发其他插件的事件
    selector: false // 禁用委托事件，避免覆盖Tooltip
  });
  
  // 延迟100ms初始化Tooltip，确保confirmation已经完成绑定
  setTimeout(() => {
    $('[data-toggle=confirmation]').tooltip({
      placement: 'top',
      title: '点击删除这条记录'
    });
  }, 100);
});

另外要注意：确保你的bootstrap-confirmation版本和Bootstrap主版本兼容（比如Bootstrap 4要对应支持v4的confirmation版本），版本不匹配也会导致这类奇怪的冲突。

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