I have an html td element with text inside. I want it so you can hover over that element, and display a textbox on top of the active page/element explaining what that td tag's content means. Some kind of elaboration. Like the <abbr> tag.
Can this be done in CSS or Javascript?
This is possible with CSS, also with javascript. Create a table with an element:
<table>
<tr><td>
<a href=#>Info
<div class=tooltipcontainer>
<div class=tooltip>Here some info</div>
</div>
</a>
</td></tr>
</table>
CSS:
/* Container is necessary because td cannot be positioned relative */
td .tooltipcontainer {
position: relative;
}
td .tooltip {
display: none;
position: absolute;
/* More positioning, heigh, width, etc */
}
td a:hover .tooltip {
display: block;
}
When you hover over 'Info' it will show the text in the div with class='tooltip'. JavaScript (for example any jQuery tooltip plugin) has solutions with more options.
