工具提示通过垂直卷轴从桌子内部的顶部切断

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

我做了一个小提琴带工具提示的表。您可以将第一行的第一列悬停以查看问题。

任何帮助将不胜感激。

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>