HTML 表格中单元格的工具提示（无 Javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13845003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tooltips for cells in HTML table (no Javascript)
提问by dublintech
Is it possible to have tooltips for table cells with no JavaScript. Can't use it.
是否可以在没有 JavaScript 的情况下为表格单元格提供工具提示。不能用啊
回答by Mudassar Bashir
have you tried?
你有没有尝试过？
<td title="This is Title">
its working fine here on Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x
它在 Firefox v 18 (Aurora)、Internet Explorer 8 和 Google Chrome v 23x 上运行良好
回答by Jukka K. Korpela
Yes. You can use the titleattribute on cell elements, with poor usability, or you can use CSS tooltips (several existing questions, possibly duplicates of this one).
是的。您可以title在单元格元素上使用属性，但可用性较差，或者您可以使用 CSS 工具提示（几个现有问题，可能与此问题重复）。
回答by BioData41
The highest-ranked answer by Mudassar Bashir using the "title" attribute seems the easiest way to do this, but it gives you less control over how the comment/tooltip is displayed.
Mudassar Bashir 使用“标题”属性的排名最高的答案似乎是最简单的方法，但它使您对评论/工具提示的显示方式的控制较少。
I found that The answer by Christophe for a custom tooltip class seems to give much more control over the behavior of the comment/tooltip. Since the provided demo does not include a table, as per the question, here is a demo that includes a table.
我发现 Christophe 对自定义工具提示类的回答似乎可以更好地控制评论/工具提示的行为。由于提供的演示不包含表格，根据问题，这里是一个包含表格的演示。
Note that the "position" style for the parent element of the span (a in this case), must be set to "relative" so that the comment does not push the table contents around when it is displayed. It took me a little while to figure that out.
请注意，跨度的父元素（在本例中为 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>回答by Christophe
You can use css and the :hover pseudo-property. Here is a simple demo. It uses the following 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;}
Note that older browsers have limited support for :hover.
请注意，旧浏览器对 :hover 的支持有限。
回答by BR1COP
An evolution of what BioData41 added...
BioData41 添加内容的演变...
Place what follows in CSS style
将下面的内容放在 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>
Then, use it like this:
然后，像这样使用它：
<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>
回答by mvz
if (data[j] =='B'){
row.cells[j].title="Basic";
}
In Java script conditionally adding title by comparing value of Data. The Table is generated by Java script dynamically.
在 Java 脚本中，通过比较 Data 的值有条件地添加标题。该表是由 Java 脚本动态生成的。
