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