向具有固定标题和左列的表添加工具提示答案

【问题标题】：Adding tooltips to a table with fixed header and left columns向具有固定标题和左列的表添加工具提示
【发布时间】：2017-11-22 06:20:54
【问题描述】：

我正在尝试将工具提示添加到具有固定标题和左列的可滚动表中。当我添加工具提示时，当表格滚动时，单元格不再隐藏在固定的标题和列后面。

<HTML>
<HEAD>
<STYLE>
.gradebooktable {
  overflow: auto;
  height: 100px;
  width: 400px
}

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

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

th {
  background: #999;
}

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

td.pinned {
  background: #eee;
}

.tooltip{
  position:relative;
}

.tooltipcomment{
  display:none;
  position:absolute; 
  z-index:10;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:blue;
  padding:3px;
  color:red; 
  top:20px; 
  left:20px;
}

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

</style>
</STYLE>
</HEAD>
<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">Col 0</th>
          <th class="pinned">Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
          <th>Col 6</th>
          <th>Col 7</th>
          <th>Col 8</th>
          <th>Col 9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="pinned">First Cell</td>
          <td class="pinned">Second Cell</td>
         <td class="tooltip">Another Cell
                  <span class="tooltipcomment">Here is a comment</span></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>
        <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>
</HTML>

这里有一个小提琴显示问题：

https://jsfiddle.net/6jh60sgs/9/

我需要做什么才能使带有工具提示的单元格滚动到固定的标题和列后面？

【问题讨论】：

标签： html-table tooltip scrollable fixed-header-tables

【解决方案1】：

我修好了：https://jsfiddle.net/k42myms3/1/

.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;
}

【讨论】：

【解决方案2】：

试试这个，我已经在你的代码上测试过并且可以工作

只需更改您的工具提示类

喜欢这个

.tooltip{
 position:relative;
 display: none;
 }

【讨论】：

谢谢，滚动时隐藏单元格，但工具提示不再显示。