Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     .tooltip-img {  
       position: relative;
       display:inline-block;
       font-size: 25px;
       text-align:left;
     }
      
     .tooltip-img .tt-img {
       visibility: hidden;
       padding: 5px;
       background:skyblue;
       position: absolute;
       left: 140%;
       top:-50%;
       margin-left: -50px;
     }
     
     .tooltip-img:hover .tt-img{
       visibility: visible;
     }
    </style>
  </head>
  <body>
    <h3>Example for Tooltip with Image</h3>
    <div class="tooltip-img">Tooltip Arrow
      <span class="tt-img"><img src="img/purpleflower.jpg" width=80px height=50px /><br> Purple Flower</span>
    </div>
  </body>
</html>
​