Tooltip is hidden behind table row

Question

This should be a simple CSS fix if I could only figure out why. z-index, overflow visibility don't seem to be doing anything. I just want 'In Progress' to appear above everything else.

I've tried:

• z-index: 999
• overflow: visible
• setting z-index on all table, tbody, th, td to 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>

Answer 1

It was missing the container property:

<div ngbTooltip="Test" container="body"></div>

https://ng-bootstrap.github.io/#/guides/positioning