To add tooltips for cells in HTML table, we add the title attribute to our table elements. to set the title attribute to the tooltip text in the td element. Then when we hover the cell, the tooltip text would be the title attribute value.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
To create a tooltip add bootstrap libraries to your code. Add the data-toggle="tooltip" atribute to an element. Add your description in the title atribute. In the above code, I've used tooltip in a <td> element.
have you tried?
<td title="This is Title">
its working fine here on Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x
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>
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).
You can use css and the :hover pseudo-property. Here is a simple demo. It uses the following 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.
An evolution of what BioData41 added...
Place what follows in CSS style
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With