Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.
On the other hand I don't find myself using the clearfix ( actually I ditched floats for layouts, long time ago ), css triangles ( usually some unicode arrow or an image ), gradients / animations and shadows are out of the current trend ( everything is flat / material these days ).
Unless you want to show a tooltip in a container that has `overflow: hidden`, since it will then clip the tooltip as well. You need to use JS in that case and put the tooltip directly in body, then position it absolutely.
1: https://kazzkiq.github.io/balloon.css/
EDIT: Sorry, now I read your comment. Yeah that's true, you will have to make some exception with your container in this case. But this sounds like an edge case to me.
Not sure I agree about the triangles and other shapes. background-img and linear-gradients allow for some nice solutions and avoid having to load or deal with an image.
Just for fund, check https://a.singlediv.com/ from Lynn Fisher, she draws some pretty awesome stuff mostly with linear-gradients :)
I'm sure it can be done if you create enough media selectors for every common resolution but outside of that...
Having 10kb tooltip library for doing this automatically is a bit of an overkill for me [1].
Of course, but I hardly see how that's comparable to writing a React class "ToolTip" which is smart enough to know where the side of the screen is, and comes with the ability to use JS.