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.