Fancy Tooltips using CSS3

| Last Updated: | In: HTML / CSS

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 founder of and Software developer from New Delhi (India). Follow Prem's development codes on facebook, and make sure you check out for the latest in web development related Tips with the complete code.

You may also like:

Follow us!

Get Free Access of 350+ Scripts

Don't worry you'll not be spammed!

Featured eBook

WordPress Security Guide

Learn how to implement security guideline in your WordPress site...


Pincode Finder

pincode-finder tool

Online Pincode Finder

Best tool to locate post Office address and pincodes of all india...