a{
     color:#ccc;
     text-shadow:0 -1px 0 black;                
}

a span{
     position:absolute;
     margin-top:23px;
     margin-left:-35px;
     color:#09c;
     background:rgba(0,0,0,.9);
     padding:15px;
     border-radius:3px;
     box-shadow:0 0 2px rgba(0,0,0,.5);
     transform:scale(0) rotate(-12deg);
     transition:all .25s;
     opacity:0;

}

a:hover,a:focus{
     background:rgba(0,0,0,.4);
     box-shadow:0 1px 0 rgba(255,255,255,.4);
}

a:hover span, a:focus span{
     transform:scale(1) rotate(0);
     opacity:1;
}

<a href="#">Hover Me!
          <span>I'm a popup...</span>
     </a>