HTML 表格中单元格的工具提示(没有 Javascript)

有没有可能为没有 JavaScript 的表单元格提供工具提示。无法使用。

171236 次浏览
小开

是的。可以在单元格元素上使用 title属性，但可用性较差，也可以使用 CSS 工具提示(几个现有的问题，可能重复这个问题)。

小开

你可以使用 css 和: hover 伪属性:

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

请注意，较老的浏览器对: hover 的支持有限。

小开
最佳答案

你试过了吗？

<td title="This is Title">

在火狐 v18(Aurora)、 Internet Explorer 8和谷歌 Chrome v23x 上运行良好

小开

Mudassar Bashir 使用“ title”属性得到的排名最高的答案似乎是最简单的方法，但是它使您无法控制评论/工具提示的显示方式。

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 包含表格的演示.

注意，span (在本例中为 a)的父元素的“ position”样式必须设置为“ relant”，以便注释在显示时不会推动表内容。我花了点时间才想明白。

#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>
小开 
if (data[j] =='B'){
row.cells[j].title="Basic";
}

在 Java 脚本中，通过比较 Data 的值有条件地添加 title。 表是由 Java 脚本动态生成的。


提交答案