工具提示被垂直滚动从内部表格的顶部切断

Question

我有一个表格，对于每个表格单元格，我都显示了一个关于表格单元格悬停的工具提示。问题是当表格滚动并且工具提示内容非常大时，它会从顶部被切断。

我使用下面的 css 样式来显示工具提示。

.CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute; 
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:red;
  padding:3px;
  color:red; 
  bottom:20px; 
  left:20px;
}

我做了一个小提琴 table with tooltip。 您可以将鼠标悬停在第一行的第一列以查看问题。

任何帮助将不胜感激。

Answer 1

您走在正确的道路上。您可以从顶部定位，而不是从底部定位评论。我还在代码中添加了一些注释，见下文。

#MyTable{
  border-style:solid;
  border-color:black;
  border-width:2px
}

#MyTable td{
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:3px;
}

.CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute; 
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:red;
  padding:3px;
  color:red; 
  bottom:20px; 
  left:20px;
  width: 130px; 
  max-height: 37px; 
  overflow-x: auto;
}

.CellWithComment:hover span.CellComment{
  display:block;
}

<div style="height:200px;overflow:auto;margin-top:40px">
<table id="MyTable">
  <caption>Cell 1,2 Has a Comment</caption>
  <thead>
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">That is going to be a really big tool-tip text. </span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
        <tr>
     <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,1</td>
     
      <td>Cell 1,3</td>
      </tr>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td>
      <td>Cell 2,3</td>
    </tr>
  </tbody>
  
</table>
</div>