Image in a tooltip in pure CSS

Only with CSS, a bubble of information is created containing images, and whose appearance is customized.

Move the mouse over the link below...

Demonstration

How use my site

The description with an image.

The HTML code:

<a class="tooltip" href="">
   Demonstration
   <span><img src="https://www.scriptol.com/images/apache.png">
   <h3>How use my site</h3>
    The description with an image.
   </span>
</a>

With modern browsers, it is possible to replace the <a> tag by a <div> tag. This allow then to add links in the tooltip the user may click without to reload the page.

The CSS code:

.tooltip {
  text-decoration:none;
  position:relative;
}

.tooltip span {
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white;	
}

.tooltip span img {
  float:left;
  margin:0px 8px 8px 0;
}

.tooltip:hover span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
  max-width:320px;
  min-height:128px;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

No JavaScript code...

You must disable the underline at the link tag, otherwise it will be active in the tooltip.

We chose to place the image in the top left with the property float: left. This is an example, you can change or remove this property according to your needs.

In terms of SEO, we do not recommend putting the information essential to a product in a tooltip. The information which should be provided is that which helps the user to use the site.