A Tooltip
HTML
<table class="upgradeTables">
<thead>
<tr>
<td>My head 1</td>
<td>My head 2</td>
<td>My head 3</td>
<td>My head 4</td>
<td>My head 5</td>
</tr>
</thead>
</table>
CSS
.upgradeTables {
margin-top: 2em;
}
.upgradeTables td {
position: relative;
}
.tooltip {
background: #000;
color: #f7f7f7;
opacity: 0.95;
display: block;
font-weight: bold;
position: absolute;
text-align: center;
top: -100%;
left: 0;
width: auto;
min-width: 100px;
padding: 5px;
}
JavaScript
$(function() {
$('.upgradeTables td:gt(1)')
.each(function() {
var tooltip = document.createElement("div");
$(tooltip).html('Upgrade To').addClass('tooltip').css('display', 'none');
$(this).append(tooltip);
})
.hover(function() {
$('.tooltip', this).toggle();
});
});