表格单元格内的按钮不显示引导工具提示

Question

我在值表中的每一行都有一个按钮，单击时会打开一个模式。我需要让按钮在鼠标悬停和获取焦点时显示工具提示。这是相关 HTML 的简化示例。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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-toggle="tooltip" title="User name">User</u></th>
      <th scope="col" class="text-center"><u data-toggle="tooltip" title="User role">Role</u></th>
      <th scope="col" class="text-center"><u data-toggle="tooltip" title="Change the user role">Edit Role</u></th>
    </tr>
  </thead>
  <tbody>
    <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-toggle="tooltip" data-placement="top" title="Click to update user role">
        <button type="button" class="btn trn-outline-primary p-1" id="edit_role_btn" name="edit_role" data-toggle="modal" data-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>
    <tbody>
</table>

我已将

data-toggle="tooltip"

与桌子外的其他按钮一起使用，效果很好。但在表中，我得到的只是鼠标悬停时的通用非 Bootstrap 工具提示，而 getfocus 上没有任何提示。

Answer 1

根据工具提示文档：

• 出于性能原因选择使用工具提示，因此 您必须自行初始化它们。

如上所述，您必须先初始化工具提示才能使用它们。初始化页面上所有工具提示的一种方法是通过其

data-bs-toggle

属性选择它们，如下所示：

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)

在您提供的示例 HTML 中，您似乎使用

data-toggle

而不是

data-bs-toggle

，因此我们可以稍微调整一下：

const tooltipTriggerList = document.querySelectorAll('[data-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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-toggle="tooltip" title="User name">User</u></th>
      <th scope="col" class="text-center"><u data-toggle="tooltip" title="User role">Role</u></th>
      <th scope="col" class="text-center"><u data-toggle="tooltip" title="Change the user role">Edit Role</u></th>
    </tr>
  </thead>
  <tbody>
    <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-toggle="tooltip" data-placement="top" title="Click to update user role">
        <button type="button" class="btn trn-outline-primary p-1" id="edit_role_btn" name="edit_role" data-toggle="modal" data-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>
    <tbody>
</table>