I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else.
Some things I've already tried:
- Setting z-index: 999
- Applying overflow: visible
- Adding z-index to all table, tbody, th, td elements with a value of 0
https://i.stack.imgur.com/SdMl9.png
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>