Infobull in CSS containing image

Basically, using the CSS code, information bubbles containing images are created, and the appearance of which is improved.

Move the mouse over the next link

Display

How to use my site

Description with image.

HTML-code

<a class="tooltip" href="">
   Démonstration
   <span><img src="https://www.iqlevsha.ru/images/apache.png">
   <h3>Comment utiliser mon site</h3>
    La description avec une image.
   </span>
</a>

Modern browsers can replace the <a> tag with the <div> tag. In this case, you can place links in the inforbull.

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 underline at the link tag level or it will be active in the tooltip.

It was decided to place the image in the upper left corner with the float: left property. This is an example, you can change or delete this property depending on its needs.

From the point of view of reference information, it is not recommended to put the information required for the product in the tooltip. Rather, it is appropriate to provide details that help the user to use the site.