使用多个data-bs-toggle（模态框和工具提示）的最佳实践求助

问题根源 #

Bootstrap不支持在同一个DOM元素上直接绑定多个data-bs-toggle属性，你当前把tooltip绑定在内部<span>上，导致触发区域仅为图标；强行调换绑定位置又会和btn-group的事件冒泡冲突。

正确解决方案 #

把tooltip直接绑定到按钮（<a>标签）本身，同时处理禁用状态下的tooltip触发问题，具体调整如下：

<a href="#" 
   data-bs-toggle="modal" 
   data-bs-target="#link_delete_modal" 
   class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" 
   data-link-id="<?= $row->link_id ?>"
   data-bs-toggle="tooltip" 
   data-bs-placement="top" <!-- 可指定tooltip位置：top/right/bottom/left -->
   title="<?= l('global.delete') ?>"
   data-bs-container="body"> <!-- 解决禁用按钮无法触发tooltip的问题 -->
  <i class="fa fa-fw fa-1x fa-trash-alt"></i>
</a>

关键说明 #

• 移除内部span的tooltip属性：将tooltip的data-bs-toggle、title移到按钮根元素上，hover整个按钮都会触发tooltip，位置自然落在按钮侧边。
• 处理禁用按钮的tooltip：Bootstrap默认不会对disabled状态的元素触发tooltip，添加data-bs-container="body"可绕过这个限制，让tooltip正常显示。
• 避免事件冲突：modal绑定保留在按钮上，点击事件正常触发模态框，hover事件触发tooltip，两者互不干扰，也不会影响btn-group的布局和功能。

可选：手动初始化tooltip（更灵活） #

如果需要更精细的控制，也可以通过JS手动初始化tooltip，彻底避免data属性冲突：

// 初始化所有带tooltip标记的按钮
document.querySelectorAll('.btn[data-tooltip]').forEach(el => {
  new bootstrap.Tooltip(el, {
    container: 'body',
    placement: 'top'
  });
});

对应的HTML调整：

<a href="#" 
   data-bs-toggle="modal" 
   data-bs-target="#link_delete_modal" 
   class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" 
   data-link-id="<?= $row->link_id ?>"
   data-tooltip 
   title="<?= l('global.delete') ?>">
  <i class="fa fa-fw fa-1x fa-trash-alt"></i>
</a>

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