Tooltips for cells in HTML table (no Javascript)
Yes. You can use the title attribute on cell elements, with poor usability, or you can use CSS tooltips (several existing questions, possibly duplicates of this one).
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.
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.
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.
#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>have you tried?
<td title="This is Title">
its working fine here on Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x