Fancy Tooltips using CSS3

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

Features

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

HTML Code

CSS3 Code

demo download.

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

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Recommended Posts:


Prem Tiwari

An engineer by profession and a passionate blogger by heart. Founder of FreeWebMentor.com (A Programming blog for beginners), Tech Speaker at various forums. A part from this he is an open source enthusiast, WordPress Lover, Blogger, SEO, and Growth Strategic.

Article Tags: