Ajax Loader
×

Pure CSS Tooltip With Arrow

Very simple CSS3 tooltip with arrow. The key to create these tootips is the use of CSS pseudo elements (:after and :before). The :after pseudo element of the a tag is given attr(title) as its content and is styled accordingly. To create the arrow, :before pseudo element is used and the triange is created using borders. 

Then these are made visible when the user hovers the link by using :hover event. Pretty cool and useful effect.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS Tooltip With Arrow

    CSSDeck G+