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 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.