Tooltip box with arrow when mouse hover a profile picture - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Tooltip

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Tooltip

Description

Tooltip box with arrow when mouse hover a profile picture

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
 <head> 
  <title>Document</title> 
  <style>

.tooltips {<!--from  w ww  .j av  a2 s . com-->
   border-bottom: 1px dotted #000000; color: #000000; outline: none;
   cursor: help; text-decoration: none;
   position: relative;
}
.tooltips span {
   margin-left: -999em;
   position: absolute;
}
.tooltips:hover span {
   border-radius: 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
   font-family: Calibri, Tahoma, Geneva, sans-serif;
   position: absolute; left: 1em; top: 2em; z-index: 99;
   margin-left: 0; width: 210px;
}
.classic { padding: 0.5em 1em; }
* html a:hover { background: transparent; }
.classic {background: #007DC3; border: 1px solid #FFAD33; color:#fff;}


      </style> 
 </head> 
 <body> 
  <table style="width:100%"> 
   <tbody> 
    <tr> 
     <td> <a class="tooltips" href="#"> 
          <img src="https://www.java2s.com/style/demo/InternetExplorer.png" width="200" height="200" title=""> 
          <span class="classic">
          this is a test this is a test this is a test this is a test this is a test 
          this is a test this is a test this is a test this is a test this is a test 
          this is a test this is a test this is a test this is a test this is a test 
          this is a test this is a test this is a test this is a test this is a test 
          this is a test this is a test this is a test this is a test this is a test 
          this is a test this is a test this is a test this is a test this is a test 
          this is a test </span> </a> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials