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>
