<span class="tooltip" data-tooltip="Я простая всплывающая подсказка">Текст</span>

.tooltip {  
border-bottom: 1px dotted #0077AA;  
color: #0077AA;  
cursor: help  
  }  

  .tooltip::after { /* Внешний вид нашего тултипа */  
color: #FFF;  
margin-top: -24px;  
max-width: 300px;  
padding: 3px 7px;  
position: absolute;  
content: attr(data-tooltip); /* Главная часть кода, отображающая контент подсказки */  
background: rgba(0, 0, 0, 0.8); /* Указываем фон в формате rgba */  
border-radius: 8px 8px 8px 0px; /* Скругляем углы */  
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); /* Добавляем тень */  
opacity: 0; /* Добавляем полную прозрачность */  
visibility: hidden; /* Скрываем */  
transition: 0.4s ease-in-out; /* Добавляем плавности по вкусу */  
-webkit-transition: 0.4s ease-in-out;  
-moz-transition: 0.4s ease-in-out;  
-o-transition: 0.4s ease-in-out  
  }  

  .tooltip:hover::after { /* При наведении отображаем тултип */  
opacity: 1;  
visibility: visible  
  }

<a class="htooltip" href="http://www.apo-ucoz.com/">Текст<span>Я всплывающая подсказка c картинкой <img src="image.png"></span></a>

.htooltip {  
border-bottom: 1px dotted #0077AA;  
color: #0077AA;  
cursor: help  
  }  

  .htooltip span { /* Внешний вид нашего тултипа */  
color: #FFF;  
margin-top: -95px;
max-width: 300px;  
padding: 10px 10px 10px 40px;  
position: absolute;  
text-decoration: none;  
z-index: 10;  
background-color: rgba(0,0,0, 0.8); /* Указываем фон в формате rgba */  
border-radius: 15px 15px 15px 0px; /* Скругляем углы */  
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); /* Добавляем тень */  
opacity: 0; /* Добавляем полную прозрачность */  
visibility: hidden; /* Скрываем */  
transition: 0.4s ease-in-out; /* Добавляем плавности по вкусу */  
-webkit-transition: 0.4s ease-in-out;  
-moz-transition: 0.4s ease-in-out;  
-o-transition: 0.4s ease-in-out  
  }  

  .htooltip:hover span { /* При наведении отображаем тултип */  
opacity: 1;  
visibility: visible  
  }  

  .htooltip span img { /* Стиль изображения */  
float: left;  
margin: -80px 0 0 -260px;  
opacity: 0;  
position: absolute;  
visibility: hidden;  
z-index: -1;  
transition: 0.4s ease-in-out; /* Добавляем плавности по вкусу */  
-webkit-transition: 0.4s ease-in-out;  
-moz-transition: 0.4s ease-in-out;  
-o-transition: 0.4s ease-in-out  
  }  

  .htooltip:hover span img { /* При наведении показываем изображение */  
opacity: 1;  
visibility: visible  
  }