Bootstrap 工具提示位置错误

Question

我在带有 overflow: auto 的父级中使用 Bootstrap 工具提示时遇到问题，更具体地说是在 .table-responsive div 中。两个按钮都在 <td> 内并且有 data-bs-placement="top"，因此工具提示应该放在它们的顶部，而不是其他任何地方。

设置 overflow: auto 时，会发生这种情况：

预期的行为（当 overflow: auto 被移除时）是这样的：

我的 Bootstrap 版本是 5.0.0-beta3，可以在下面找到代码的缩短版本：

/* initialize all tooltips */
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

body table.table-overview thead {
  color: #06a3a4;
  line-height: 1;
}

body table.table-overview td {
  white-space: nowrap
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="table-responsive">
  <table class="table table-overview">
    <thead>
      <tr>
        <th scope="col" style="width: 19%">ID</th>
        <th scope="col" style="width: 19%">Peso</th>
        <th scope="col" style="width: 19%">Variação</th>
        <th scope="col" style="width: 19%">Data</th>
        <th scope="col" style="width: 19%">Hora</th>
        <th scope="col" style="width: 5%"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ASWER</td>
        <td>15,5</td>
        <td>
          <span class="text-success">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></path>
            </svg>
            18,32%
          </span>
        </td>
        <td>10/04/2020</td>
        <td>17:45</td>
        <td>
          <div style="display: flex; align-items: center; justify-content: flex-end">
            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-container="body" title="" data-bs-original-title="Alterar" aria-label="Alterar">
              <svg style="width:24px;height:24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z"></path>
              </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-container="body" title="" data-bs-original-title="Excluir" aria-label="Excluir">
              <svg style="width:24px;height:24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>ASWER</td>
        <td>15,5</td>
        <td>
          <span class="text-success">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></path>
            </svg>
            18,32%
          </span>
        </td>
        <td>10/04/2020</td>
        <td>17:45</td>
        <td>
          <div style="display: flex; align-items: center; justify-content: flex-end">
            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-container="body" title="" data-bs-original-title="Alterar" aria-label="Alterar">
              <svg style="width:24px;height:24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z"></path>
              </svg>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-container="body" title="" data-bs-original-title="Excluir" aria-label="Excluir">
              <svg style="width:24px;height:24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>