Hello,
In a column in the html table I have a text with reference to an image. How do I make when the mouse is over that column to appear a tooltip with an image (ex. "photos/pencil.png", with certain width and height size)?
Thank You.
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tooltip in columns in HTML Table</title>
<style type="text/css">
#t_id {
margin: 1% auto;
}
#t_id, #t_id td {
border: 1px solid #333;
padding: 1px;
}
#t_id td div {
position: relative;
}
#t_id td .td_tooltip {
display: none;
position: absolute;
top: -50px;
left: 50%;
margin: 0;
width: 100px;
height: 50px;
}
#t_id td:hover .td_tooltip {
display: block;
}
#t_id td .td_tooltip:hover {
display: block;
}
</style>
</head>
<body>
<table id="t_id">
<tbody>
<tr>
<th>WebSite</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td class="row_s"><div>
<img src="image_1.jpg" alt="Img 1" width="100" height="50" class="td_tooltip" /> http://coursesweb.net/
</div></td>
<td class="row_t">Courses WebDevelopment</td>
<td class="row_d">Free WebDevelopment courses, Games ...</td>
</tr>
<tr>
<td class="row_s"><div>
<img src="image_2.jpg" alt="Img 2" width="100" height="50" class="td_tooltip" /> http://www.marplo.net/
</div></td>
<td class="row_t">MarPlo.net - Free Courses</div></td>
<td class="row_d">Free Courses, Games, Spirituality</td>
</tr>
</tbody></table>
</body>
</html>