Bootstrap4按钮同时实现data-toggle与tooltip的异常问题求助

嘿，我之前也碰到过类似的问题！你描述的情况很典型：按钮未激活时Tooltip随鼠标移入移出正常工作，但点击进入active状态后，Tooltip就一直挂在那儿，直到点其他按钮才消失。本质原因是按钮激活后会保持focus状态，而Bootstrap Tooltip默认会在元素聚焦时也显示，且聚焦状态不会因为鼠标移开而自动解除。

下面给你几个实用的解决办法，按需选择：

方案一：点击激活时手动隐藏Tooltip（最直接） #

我们可以给按钮绑定点击事件，在它切换active状态的同时，强制隐藏Tooltip：

// 先初始化Tooltip
$('[data-hover="tooltip"]').tooltip();

// 监听按钮点击
$('.btn-secondary').on('click', function() {
  // 切换active类（Bootstrap的data-toggle已经会做这个，手动写也不冲突）
  $(this).toggleClass('active');
  
  // 如果当前是激活状态，立刻隐藏Tooltip
  if ($(this).hasClass('active')) {
    $(this).tooltip('hide');
  }
});

这个方法简单粗暴，直接解决问题，不会影响其他功能。

方案二：修改Tooltip的触发逻辑 #

默认Tooltip的触发条件是hover + focus，我们可以把它改成只在hover时触发，这样即使按钮处于focus（active）状态，也不会因为聚焦而显示Tooltip：

$('[data-hover="tooltip"]').tooltip({
  trigger: 'hover' // 仅鼠标悬停时触发Tooltip
});

⚠️ 注意：这个方法会牺牲键盘导航的Tooltip支持——如果用户用Tab键选中按钮，Tooltip不会显示。如果你的场景不需要考虑键盘操作，这个方法非常省心。

方案三：利用Bootstrap原生按钮事件 #

因为你用了data-toggle="button"，Bootstrap会触发专属的按钮事件，我们可以监听这些事件来精准控制Tooltip：

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

// 监听Bootstrap按钮的点击事件
$('.btn-secondary').on('click.bs.button', function() {
  // 延迟100ms隐藏，确保按钮状态切换完成
  setTimeout(() => {
    $(this).tooltip('hide');
  }, 100);
});

这个方法更贴合Bootstrap的原生机制，延迟一小段时间是为了保证按钮的active状态已经切换完毕，再执行隐藏操作，避免出现时序问题。

小提醒：修正HTML拼写错误 #

哦对了，你代码里的data-toggle="buton"少写了一个t，应该是data-toggle="button"！虽然目前可能没影响，但建议修正，避免后续出现莫名其妙的bug。

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