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="http://www.scriptol.com/images/apache.png">
   <h3>How use my site</h3>
    The description with an image.>
   </span>
</a>

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...

We 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. It should rather provide information that helps the user to use the site.