Page 1 of 1
Tooltip with Image in HTML table cell
Posted: 07 Dec 2014, 08:10
by Marius
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.
Tooltip with Image in HTML table cell
Posted: 07 Dec 2014, 08:17
by Admin
Hi,
It can be made with HTML and CSS.
The data in that column is added into a Div, together with the image for the tooltip. In CSS is defined the image to not be displayed (display: none;) and having absolute position (position: absolute;), then when the mouse "hover" on that column the image to be displayed.
View this example, change the images and sizes as you need.
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" /> https://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>