Tooltip with Image in HTML table cell

Marius
Posts: 58

Tooltip with Image in HTML table cell

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.

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" /> 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>

Similar Topics