HTML表格中单元格的工具提示(无javascript)

是否有没有JavaScript的表格单元格的工具提示。 无法使用它。 谢谢?

你有没有尝试过?

<td title="This is Title"> 

它在Firefox v 18(Aurora),Internet Explorer 8和Google Chrome v 23x上工作得很好

是。 你可以在单元格元素上使用title属性,可用性差,或者你可以使用CSS工具提示(一些现有的问题,可能是这个问题的重复)。

你可以使用CSS和:hover伪属性。 这是一个简单的演示 。 它使用以下的CSS:

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

请注意,以前的浏览器对以下方面的支持有限:hover。

由Mudassar Bashir使用“title”属性排名最高的答案似乎是最简单的方法,但是它可以减less对评论/工具提示的显示方式的控制。

我发现Christophe的自定义工具提示类的答案似乎给予了更多的对评论/工具提示行为的控制。 由于提供的演示不包括一个表,按照这个问题,这里是一个演示,包括一个表 。

请注意,跨度(本例中为a)的父元素的“位置”样式必须设置为“相对”,以便注释在显示时不会推送表格内容。 我花了一点时间来弄清楚。

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

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>