Pure CSS Tooltip With Arrow

Winston Wolf

• 400913
• 21
• 2

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:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room