table header 中的工具提示

Question

我有一个可滚动的 table，固定的 header 和列，以及 header 中的工具提示。 header 中还有一个 rowspan。我已经尝试了很长时间，让 header 行中的工具提示显示在以下行中 header 单元格的顶部。即使在阅读了关于堆栈上下文和 z-index 的所有内容（包括 W3C 规范）之后，我似乎也找不到解决方案。

CSS:

.gradebooktable {
  overflow: auto;
  height: 200px;
  width: 400px
}

table {
  table-layout: fixed;
  border-width: 0;
  border-spacing: 0;
}

td {
  position:relative;
  padding: 3px;
  white-space: nowrap;
  border-right: 1px solid #ccc;
}

th {
  position:relative;
  z-index:20; 
  background: #999;
}

th.pinned {
  position: relative; 
  z-index: 40;     
  background: #ccc;
}

td.pinned {
  position: relative;
  z-index: 30; 
  background: #eee; 
}

.tooltip{
  position:relative;
}

.tooltiptext{
  display:none;
  position:absolute; 
  z-index:10;
  border:1px;
  background-color:#eee;
  border-style:solid;
  border-width:1px;
  border-color:blue;
  border-radius: 6px;
  padding:3px;
  color:blue; 
  top:20px; 
  left:20px;
}

.tooltip:hover span.tooltiptext{
  display:block;
}

HTML:

<BODY>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SCRIPT>
$( function() {
$('#gradebooktable').scroll( function() {
      var translate = "translate(0," + this.scrollTop + "px)";
      $("table thead th:not(.pinned)").css('transform', translate);

      translate = "translate(" + this.scrollLeft + "px,0)";
      $("table tbody .pinned").css('transform', translate);

      translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)";
      $("table thead th.pinned").css('transform', translate);
    }
);  
});
</SCRIPT>
  <div id="gradebooktable" class="gradebooktable">
    <table>
      <thead>
        <tr>
          <th class="pinned" rowspan=3>Col 0</th>
          <th class="pinned" rowspan=3>Col 1</th>
          <th class="tooltip">Col 2A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 3A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 4A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 5A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 6A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 7A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 8A
               <span class="tooltiptext">Tooltip for header cell</span></th>
          <th class="tooltip">Col 9A
               <span class="tooltiptext">Tooltip for header cell</span></th>
        </tr>
        <tr>
          <th>Col 2B</th>
          <th>Col 3B</th>
          <th>Col 4B</th>
          <th>Col 5B</th>
          <th>Col 6B</th>
          <th>Col 7B</th>
          <th>Col 8B</th>
          <th>Col 9B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
          <td class="tooltip">Another Cell
                  <span class="tooltiptext">Tooltip for body cell</span></td>
        </tr>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
        </tr>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
        </tr>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
        </tr>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
        </tr>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
        </tr>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
          <td>Another Cell</td>
        </tr>
      </tbody>
    </table>
    </div>
</BODY>

Fiddle 这里：https://jsfiddle.net/k42myms3/5/

目标是让跨 header 行顶行的工具提示显示在跨 header 行底行的单元格顶部。我可以找到显示工具提示的方法，例如通过从 .tooltiptext css 中删除 position:absolute，但并非不会导致定位问题或破坏 table 单元格在固定的后面滚动header 和列。

Answer 1

没关系，修复它：https://jsfiddle.net/k42myms3/10/

添加的代码：

th.tooltip{
  position:relative;
  z-index: 35; 
}

...以及其他一些事情。

table header 中的工具提示

Tooltip in table header

css

header

fixed

tooltip