工具提示隐藏在表格行后面

Question

如果我能弄清楚原因，这应该是一个简单的 CSS 修复。 z-index，溢出可见性似乎没有做任何事情。我只希望“进行中”显示在其他所有内容之上。

我试过了：

• z 索引：999
• 溢出：可见
• 将所有表的 z-index、tbody、th、td 设置为 0

HTML

.custom-tooltip {
  .tooltip-inner {
    background: $Alabaster-gray;
    width: max-content;
    color: $cape-cod-gray;
    font-size: 1rem;
  }
  .arrow::before {
    border-top-color: $Alabaster-gray;
  }
  &.left {
    .tooltip-inner {
      text-align: left;
      white-space: pre-wrap;
    }
  }

  z-index: 9999;
  overflow: visible;
  position: relative;
}

table thead tr tbody td div {
  z-index: auto;
  position: relative;
  overflow: visible;
}

.status {
  height: 18px;
  width: 18px;
  border-radius: 20px;
  background-position: center;
  margin-top: 2px;
  &.yellow {
    background-image: url('../../../assets/icons/active.svg');
  }
}

<div>
  <table>
    <thead>
      <th>Name</th>
    </thead>
  </table>
  <tbody>
    <tr *ngFor="let job of jobs">
      <td>
        <div>
          <div ngbTooltip="'In Progress'" tooltipClass="custom-tooltip">
              <div class="status mx-4" [ngClass]="'yellow'"></div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</div>