Fancy Tooltips using CSS3

Prem Tiwari - - Web Technologies

Today I am going to explain you about creating fancy tooltips using pure css3. Oftentimes pointy arrows like we have here are doable with no additional markup or images by using pseudo elements and CSS triangles. In our case, we are going to use a pseudo element, but we’ll need a real element as well. The real element (the that the JavaScript inserted in each tooltip

) serves as a positional box and does the cropping. The pseudo element is the actual pointer. A box styled the exact same way as the tooltip, only rotated 45deg and cropped out by it’s parent. Here’s the schematics:

Fancy Tooltips using CSS3


  • Multiple Colors
  • Multiple Directions
  • Pure CSS3
  • Works in Major Browsers


CSS3 Code

demo download.

Please don’t forget to share and subscribe to latest updates of the blog.

About: Prem Tiwari

Prem Tiwari is the founder of and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.