Tooltip z-index being covered by other element

Question

I've been having this issue where when I try using a tooltip on a set of elements that are created next to each other, the headers for the elements that are created afterwards are shown on top of the tooltip. I've been trying to fiddle with the z-index, but it doesn't really seem to do much - I'm not sure what might be causing this.

.header {
  vertical-align: bottom;
}

.rotated-header .tooltip-text {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  opacity: 0;
  transform:rotate(45deg);
  transform-origin: left;
  width:25em;
  white-space: normal;
}

.rotated-header .tooltip-text::after {
  content: "";
  position: absolute;
  border-style: solid;
  z-index: 11;
}

.rotated-header:hover .tooltip-text {
  visibility: visible;
  position: absolute;
  opacity: 1;
  z-index: 10;
}

.schedule-header-tooltip {
  white-space: nowrap;
  pointer-events: auto;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.rotated-header {
  width:30px;
  height:100px;
  position:relative;
  transform: 
    translate(1em, -1em)
    rotate(315deg);
  transform-origin:bottom;
  pointer-events: none;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead tr { 
  position: sticky;
  top: -2em;
  background: white;
}

<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th class="header">Asset</th>
        <th class="header">
          <div class="rotated-header">
            <div class="schedule-header-tooltip">
              <span>Rotated row 1</span>
            </div>
            <div class="tooltip-text">
              <span>Name</span>Something extremely long and unwieldy
              <span>Date</span>
              <span>Age</span>
            </div>
          </div>
        </th>
        <th class="header">
          <div class="rotated-header">
            <div class="schedule-header-tooltip">
              <span>Rotated row 1</span>
            </div>
            <div class="tooltip-text">
              <span>Name:</span> Something extremely long and unwieldy
              <span>Date</span>
              <span>Age</span>            
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
    </tbody>
  </table>
</div>

I'm not exactly sure if there's a better way to do the tooltip for this

Answer 1

It's all to do with stacking context. You're creating a new stacking context each time one of the things listed here occurs. This includes any position of relative with a stated z-index and transforms. So what's happening is that because you create a new stacking context (looks like when you're rotating the text), the child element which is the tooltip is positioned in a z index to that div, but the next cell over is in a different stacking context and the z-index rule in the div in the table cell that contains the first tooltip doesn't apply to the second one over.

If you move the tooltop as a sibling then you can get it to work. I've removed a lot of the CSS so you can hopefully see what I'm doing.

table {
  margin-top: 100px;
}

th {
  position: relative;
}

.tooltip-text {
  display: none;
  position: absolute;
  top: -10%;
  background-color: red;
  color: white;
  z-index: 100;
  width: 200px;
}

.rotated-header:hover+.tooltip-text {
  display: block;
}

.rotated-header {
  transform: rotate(-45deg);
  transform-origin: bottom left;
}

<div class="tableFixHead">
  <table>
    <thead>
      <tr class="header">
        <th>Asset</th>
        <th>
          <div class="rotated-header">
            Rotated row 1
          </div>
          <div class="tooltip-text">
            <span>Name:</span> Something extremely long and unwieldy
            <span>Date</span>
            <span>Age</span>
          </div>
        </th>
        <th>
          <div class="rotated-header">
            Rotated row 1
          </div>
          <div class="tooltip-text">
            <span>Name:</span> Something extremely long and unwieldy
            <span>Date</span>
            <span>Age</span>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
    </tbody>
  </table>
</div>