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.
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 :)
Having 10kb tooltip library for doing this automatically is a bit of an overkill for me .
1 : https://atomiks.github.io/tippyjs/
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.
I'm sure it can be done if you create enough media selectors for every common resolution but outside of that...
I used macOS fonts in my example, but this applies to every platform.
Note that it works without js, but js allows to position the button press effect right under the mouse.
Also, the ellipsis truncation is very tricky to pull off. The parent element needs to be a block if I remember correctly.
It gives you a clear picture of how well the different browsers support a given piece of web technology.
I like this!
Try the Doelger theme at Typography.js, it looks pretty good actually.
With the CSS popout menu, the menu disappears instantly, making navigation more difficult.
People provide a CSS example but omit that the parent needs to be position relative, only works with absolute positioning (which it isn't set to in the example), only certain element types, or that the tree needs a higher z-index than the sibling or it won't work.
At least on Stackoverflow someone often remarks in a reply about the gotcha/limitation.
> Browser Support: 84.6%
The percentage isn't very helpful. If a specific set of browsers are to be supported, even 99% may omit one of them.
Isn't this the default behavior?
Never mind, local issue with me.