Bootstrap 4：如何让按钮同时作为下拉触发器与提示框源？

这问题我之前也碰到过！核心原因其实是HTML不允许同一个元素有重复的同名属性——你写了两个data-toggle，浏览器只会认最后一个，所以不管顺序怎么调，总有一个功能失效。

解决方案：手动初始化Tooltip #

我们可以保留按钮上的data-toggle="dropdown"让下拉菜单正常工作，然后用JavaScript手动给按钮绑定Tooltip，不用依赖data-toggle="tooltip"属性：

1. 修改HTML代码

把重复的data-toggle="tooltip"删掉，保留下拉相关属性和Tooltip需要的title、data-placement：

<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown" data-placement="bottom" title="Test Tooltip">
  下拉+提示
</button>
<!-- 别忘了添加下拉菜单的内容 -->
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">选项1</a>
  <a class="dropdown-item" href="#">选项2</a>
</div>

2. 用JavaScript初始化Tooltip

在页面加载完成后，手动给目标按钮绑定Tooltip，并且注意设置触发方式（避免和下拉的click事件冲突）：

$(document).ready(function() {
  // 给带dropdown-toggle类的按钮绑定tooltip
  $('.dropdown-toggle').tooltip({
    trigger: 'hover focus' // 用hover或focus触发tooltip，不和下拉的click冲突
  });
});

如果你的项目用的是Bootstrap 5原生JS（无jQuery），代码可以改成这样：

document.addEventListener('DOMContentLoaded', function() {
  const dropdownButtons = document.querySelectorAll('.dropdown-toggle');
  dropdownButtons.forEach(btn => {
    new bootstrap.Tooltip(btn, {
      trigger: 'hover focus'
    });
  });
});

为什么这样可行？ #

• 下拉菜单依然通过data-toggle="dropdown"由Bootstrap自动初始化，不受影响
• Tooltip通过JS手动绑定，不再依赖data-toggle属性，彻底避免了属性冲突
• 触发方式设为hover focus，用户鼠标悬停/聚焦按钮时显示Tooltip，点击时打开下拉，两者完全不冲突

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