Tooltip z-index being covered by other element-CodePudding

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 >
  <table>
    <thead>
      <tr>
        <th >Asset</th>
        <th >
          <div >
            <div >
              <span>Rotated row 1</span>
            </div>
            <div >
              <span>Name</span>Something extremely long and unwieldy
              <span>Date</span>
              <span>Age</span>
            </div>
          </div>
        </th>
        <th >
          <div >
            <div >
              <span>Rotated row 1</span>
            </div>
            <div >
              <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

CodePudding user response：

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 >
  <table>
    <thead>
      <tr >
        <th>Asset</th>
        <th>
          <div >
            Rotated row 1
          </div>
          <div >
            <span>Name:</span> Something extremely long and unwieldy
            <span>Date</span>
            <span>Age</span>
          </div>
        </th>
        <th>
          <div >
            Rotated row 1
          </div>
          <div >
            <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>