Ajax Loader
×

CSS3 Author Info ToolTip

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:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Author Info ToolTip

    CSSDeck G+