表格单元格内按钮的Bootstrap Tooltip无法正常显示问题

问题根源 #

Bootstrap 5彻底弃用了旧版本的data-toggle系列属性，改用data-bs-前缀命名空间。你现在仍在使用data-toggle="tooltip"这类旧属性，表格内元素无法被Bootstrap 5的Tooltip组件识别，只会触发浏览器原生的title提示，焦点状态自然也不会有效果。
另外，Bootstrap 5的Tooltip组件不会自动初始化所有元素，必须手动执行初始化代码，这也是容易忽略的关键点。

修复步骤 #

1. 替换旧属性为Bootstrap 5规范属性 #

把所有与Tooltip相关的属性替换为带data-bs-前缀的版本：

• data-toggle="tooltip" → data-bs-toggle="tooltip"
• data-placement → data-bs-placement
• 可选：将title替换为data-bs-title（更贴合BS5规范，避免和原生title冲突）

2. 添加Tooltip初始化代码 #

在页面加载完成后，执行初始化代码，确保所有带data-bs-toggle="tooltip"的元素都能激活Tooltip：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有Tooltip触发元素
  const tooltipTriggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  // 初始化每个Tooltip
  tooltipTriggers.forEach(trigger => {
    new bootstrap.Tooltip(trigger);
  });
});

3. 针对动态表格的额外处理 #

如果你使用的data-toggle="table"是Bootstrap Table插件（动态渲染表格内容），需要在表格渲染完成后再初始化Tooltip，比如监听表格的post-body.bs.table事件：

// 监听Bootstrap Table渲染完成事件
document.getElementById('table').addEventListener('post-body.bs.table', function() {
  const tooltipTriggers = this.querySelectorAll('[data-bs-toggle="tooltip"]');
  tooltipTriggers.forEach(trigger => {
    new bootstrap.Tooltip(trigger);
  });
});

修正后的示例代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<table id="table" class="text-left table table-home ml-0 mt-5 table_edit" data-toggle="table">
  <thead>
    <tr>
      <th scope="col" class="text-center"><u data-bs-toggle="tooltip" data-bs-title="User name">User</u></th>
      <th scope="col" class="text-center"><u data-bs-toggle="tooltip" data-bs-title="User role">Role</u></th>
      <th scope="col" class="text-center"><u data-bs-toggle="tooltip" data-bs-title="Change the user role">Edit Role</u></th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- 补全你遗漏的<tr>标签，修复HTML结构错误 -->
      <td class="table-row user-table-data">joetest</td>
      <td class="table-row user-table-data text-center">Admin</td>
      <td class="text-center">
        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Click to update user role">
          <button type="button" class="btn trn-outline-primary p-1" id="edit_role_btn" name="edit_role" data-bs-toggle="modal" data-bs-target="#updateUserRole" 
                  data-userid="joetest" data-currentrolecode="Admin">
            <i class="fa fa-lg fa-2x fa-cog p-2" aria-hidden="true"></i>
          </button>
        </span>
      </td>
    </tr>
  </tbody>
</table>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const tooltipTriggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  tooltipTriggers.forEach(trigger => {
    new bootstrap.Tooltip(trigger);
  });

  // 如果是动态表格，启用这段代码
  document.getElementById('table').addEventListener('post-body.bs.table', function() {
    const tooltipTriggers = this.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltipTriggers.forEach(trigger => {
      new bootstrap.Tooltip(trigger);
    });
  });
});
</script>

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