HTML表格中单元格的工具提示（no javascript）

Question

是否可以为没有JavaScript的表格单元格提供工具提示。无法使用它。 谢谢？

Answer 1

你试过了吗？

<td title="This is Title"> 

其工作在这里很好的Firefox 18节（极光），Internet Explorer 8中&谷歌浏览器v 23X

Answer 2

是的。您可以在单元格元素上使用title属性，但可用性较差，或者可以使用CSS工具提示（几个现有问题，可能重复此问题）。

Answer 3

您可以使用CSS和：hover伪属性。这是一个simple demo。它使用以下css：

a span.tooltip {display:none;} 
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;} 

请注意，旧版浏览器对以下内容的支持有限：悬停。

Answer 4

最高排名回答使用“标题”由Mudassar巴希尔属性似乎是最简单的方法做到这一点，但它可以减少对评论/工具提示的显示方式的控制。

我发现Christophe对自定义工具提示类的回答似乎对评论/工具提示的行为给予了更多的控制权。由于提供的演示不包含表格，因此按照该问题，这里是a demo that includes a table。

需要注意的是，以“相对”，这样的评论不压在桌子内容时显示“位置”风格跨度的（一个在这种情况下），必须设置父元素它。我花了一段时间才弄清楚。

#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; 
 
    top:20px; 
 
    left:20px; 
 
} 
 

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

<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></tr> 
 
     <td>Cell 1,1</td> 
 
     <td class="CellWithComment">Cell 1,2 
 
     <span class="CellComment">Here is a comment</span> 
 
     </td> 
 
     <td>Cell 1,3</td> 
 
    <tr> 
 
     <td>Cell 2,1</td> 
 
     <td>Cell 2,2</td> 
 
     <td>Cell 2,3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

的BioData41添加了什么的进化...

放置在CSS样式下文

 <style> 

     .CellWithComment{position:relative;} 

     .CellComment 
     { 
      visibility: hidden; 
      width: auto; 
      position:absolute; 
      z-index:100; 
      text-align: Left; 
      opacity: 0.4; 
      transition: opacity 2s; 
      border-radius: 6px; 
      background-color: #555; 
      padding:3px; 
      top:-30px; 
      left:0px; 
     } 
     .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;} 
</style> 

然后，使用这样的：

 <table> 
      <tr> 
       <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th> 
       <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th> 
       <th>Opened</th> 
       <th>Event</th> 
       <th>Severity</th>   
       <th>Id</th> 
       <th>Component Name</th> 
      </tr> 
      <tr> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
     </table>