How can I make a simple mouseon popup tooltip with jQuery?
An easy or simple way to do this, without a jQuery plugin, is by adding some simple rules to your CSS, and then no Javascript or jQuery is necessary. I don't really understand your need for the table though, and the CSS would be simpler if your were not using one.
table td {
position: relative;
}
.tooltip {
width: 400px;
height: 300px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
border-radius: 3px;
-webkit-border-radius: 3px;
position: absolute;
top: 5px;
left: 50px;
display: none;
}
.tooltip {
z-index: 100;
}
.link {
display: block;
width: 9%;
}
.link:hover+.tooltip {
display: block;
}
.tooltip:hover {
display: block;
}<table width="600">
<tr>
<td>
<a href="#" class="link">Link-1</a>
<div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</td>
</tr>
<tr>
<td>
<a href="#" class="link">Link-2</a>
<div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
</td>
</tr>
<tr>
<td>
<a href="#" class="link">Link-3</a>
<div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div>
</td>
</tr>
<tr>
<td>
<a href="#" class="link">Link-4</a>
<div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</td>
</tr>
</table>