25 Jan /CSS & SVG Based Tooltips

Posted by Ryan Stone

While working on a quick cleanup sprint I ran into an issue with a tooltip-box. The original design was using a raster-based image as a CSS background and it wasn’t meeting our needs. Googling revealed the problem had been solved but still didn’t give me a shadow on the arrow tip. Below is the quick and dirty structure of a CSS & SVG based tooltip box.

See the Pen CSS-Only Tooltip w/ Shadow by Ryan Stone (@ryanstone) on CodePen.