如何为动态状态变化的按钮添加Bootstrap 4 Tooltip

嘿，我懂你遇到的问题了——按钮是动态添加/移除disabled类的，初始页面加载时它可能还是活跃状态，所以直接用$('.btn-link.disabled').tooltip()只能绑定当时已经是禁用状态的按钮，后续状态变化的按钮根本吃不到Tooltip。下面给你几个靠谱的解决方案，按需选就行：

方案1：实时监测类名变化（最通用） #

用MutationObserver监听按钮的类属性变化，一旦disabled被加上就自动初始化Tooltip，移除时就销毁它，完美适配动态变化：

// 选中所有目标按钮
const btnLinks = document.querySelectorAll('.btn-link');

btnLinks.forEach(btn => {
  // 创建观察者实例
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // 只关心类属性的变化
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        const $btn = $(btn);
        if ($btn.hasClass('disabled')) {
          // 禁用状态：初始化Tooltip
          $btn.tooltip({
            title: '<div class="text-left">Please select at least one item first</div>',
            html: true, // 因为title里有HTML标签，必须开这个！
            placement: 'top', // 位置可以自己调，比如bottom/right
            trigger: 'hover focus' // 禁用按钮用hover或focus触发都合适
          });
        } else {
          // 恢复活跃：销毁Tooltip，避免干扰正常状态
          $btn.tooltip('dispose');
        }
      }
    });
  });

  // 开始监听目标按钮的属性变化
  observer.observe(btn, { attributes: true });
});

方案2：提前绑定，按状态控制触发 #

一开始就给所有.btn-link绑定Tooltip，然后通过disabled类来控制什么时候触发，不用管状态什么时候变：

// 给所有按钮初始化Tooltip，先设为手动触发
$('.btn-link').tooltip({
  title: '<div class="text-left">Please select at least one item first</div>',
  html: true,
  placement: 'top',
  trigger: 'manual'
});

// 用事件委托监听鼠标/焦点事件，只对禁用的按钮生效
$(document)
  .on('mouseenter focus', '.btn-link.disabled', function() {
    $(this).tooltip('show');
  })
  .on('mouseleave blur', '.btn-link.disabled', function() {
    $(this).tooltip('hide');
  });

方案3：在状态修改代码里同步处理 #

如果你知道按钮什么时候会被设为禁用（比如用户点击了某个选择框之后），直接在修改类名的代码后面加Tooltip初始化，简单直接：

// 假设这是触发按钮禁用的代码（比如点击某个选择器）
$('.select-trigger').click(function() {
  const $targetBtn = $('.btn-link');
  $targetBtn.addClass('disabled');
  // 同步给禁用的按钮加Tooltip
  $targetBtn.tooltip({
    title: '<div class="text-left">Please select at least one item first</div>',
    html: true,
    placement: 'top'
  });
});

// 恢复按钮状态时记得销毁Tooltip
$('.reset-btn').click(function() {
  const $targetBtn = $('.btn-link');
  $targetBtn.removeClass('disabled');
  $targetBtn.tooltip('dispose');
});

几个关键提醒 #

• 如果你用的是Bootstrap Tooltip，要确保已经正确引入了Bootstrap的CSS和JS，还有jQuery（Bootstrap 3/4依赖它，Bootstrap 5可以用原生JS但写法不一样）。
• 因为你的title里有HTML结构，一定要加html: true，不然标签会被转成纯文本显示。
• 禁用状态的按钮默认可能不响应鼠标事件，所以方案2里用事件委托绑定到document上，确保能捕获到触发事件。

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