There are a number of online services that let us run SCSS code on-the-fly, but at times none of them can replace the convenience offered by an offline playground. That's why today I want to describe to you how to build a simple and flexible playground to test SCSS code locally — if you are a DIYer there are good chances you'll enjoy the post.
In this second post about tooltips I want to describe to you some new code developed on top of the CSS cascade I published about a month ago, and which I used to draw a CSS-only tooltip. I'm going to start with a slight refactoring and then add up on it new CSS rules, which will allow the tooltip to land from any of the four main directions by just changing a CSS class.
Modern CSS helps greatly in streamlining the drawing of tooltips: if it wasn't for the flexbox layout we were still obliged to resort to tricks like a negative margin, to keep a group of elements neatly centred. But what about that little bottom triangle characterising the tooltip itself? Sometimes old solutions don't lose contemporaneity.
While working on the personal area opened recently, the need arose to add a left arrow to a go‑back link without making any changes to the markup, mainly because I had no control over it. The solution followed naturally: using the ::before and ::after pseudo-elements to draw respectively the point and the shaft of the arrow.