This is a link based tooltip which displays an animated user info panel when hovering over the link. This is achieved using the sibling selector (~) as the parent selector is yet to come with CSS4. The tooltip is styled using basic CSS3 techniques like gradients, multiple box-shadows to render those inner shines etc.

The arrow is just a square created from :after pseudo element by rotating it to 45deg angle and positioning it accordingly. I didn't used border trick for the triangle because borders can't have shadows and gradients.

For the cross, I used this. ;)

Related: