Luigi Cavalieri - Coding, Sharing, Blogging

Blog / CSS

  1. How to Make a CSS-only Tooltip Appear from Any Direction

    How to Make a CSS-only Tooltip Appear from Any Direction

    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.

  2. Drawing a Tooltip with CSS: Can a Border Give Shape to a Triangle?

    Drawing a Tooltip with CSS: Can a Border Give Shape to a Triangle?

    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.

  3. How to Draw a Go-back Arrow with CSS Pseudo-elements

    How to Draw a Go-back Arrow with CSS Pseudo-elements

    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.