Инфобулл в CSS, содержащий изображение

В основном с помощью кода CSS создаются информационные пузыри, содержащие изображения, и внешний вид которых улучшается.

Поместите мышь над следующей ссылкой

Показ

Как пользоваться моим сайтом

Описание с изображением.

HTML-код

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

С помощью современных браузеров возможно заменить тег <a> на тег <div>. В этом случае в инфорбулл можно поместить ссылки.

Код CSS

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

Нет кода JavaScript...

Необходимо отключить подчеркивание на уровне тега ссылки, иначе он будет активен в подсказке.

Было решено разместить изображение в верхнем левом углу со свойством float: left. Это пример, можно изменить или удалить это свойство в зависимости от его потребностей.

С точки зрения справочной информации не рекомендуется помещать информацию, необходимую для продукта, в подсказку. Это, скорее, подходит для предоставления деталей, которые помогают пользователю использовать сайт.