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

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用垂直滚动

1 个答案: