Tooltip with Image in HTML table cell

Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
Marius
Posts: 62

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

Similar Topics