w3school has an excellent tutorial on how to build a tooltip in vanilla CSS. It makes use of the border-radius
property. If you insert an empty object (span, div) in your website, add a border around the object and increase the border width, the border will look like 4 triangles pointing inwards to the center. To see these triangles, you can color each side of the border.
Normally our content has stuff inside
width
, height
, and border-radius
are 50
pixels each.
But if we shrink down the width and height of the container to 0, we see this.
height
and width
are 0
pixels
To expose the apparent triangles that I claimed are formed, we can change the color of each side of the border to a unique color:
Amazing! If we decided to make 3 of the 4 sides transparent, we would arrive back at the classic tooltip.
Finally, if we return back to the multicolored quadtriangle image above, we can reskin it to resemble the Underworld Tiles from the classic NES title, Super Mario Bros 3.