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.