6 ms·

Most of them are oldies, but >goldies<. Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redunda

Most of them are oldies, but >goldies<. 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 ).

jypepin 9y ago
came here to say the same. First few examples are about float and cleafix - I haven't faced those in years now! 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/ https://a.singlediv.com/ from Lynn Fisher, she draws some pretty awesome stuff mostly with linear-gradients :)
andrewingram 9y ago
You can make sure the tooltip flips position to avoid going off the edge of the screen using just CSS?
- Someone1234 9y ago
  I'm curious to know this too. A responsive "pull-right" that sends an element to the right hand screen edge no matter the screen size, without having it shift onto the line below. I'm sure it can be done if you create enough media selectors for every common resolution but outside of that...
- drinchev 9y ago
  You can position the tooltip on the left, right, top, bottom in the markup with a class name. This way if the tooltip is in the header you can use e.g. `tooltip-bottom`. Having 10kb tooltip library for doing this automatically is a bit of an overkill for me [1]. 1 : https://atomiks.github.io/tippyjs/ https://atomiks.github.io/tippyjs/
  - nawgszy 9y ago
    >Having 10kb tooltip library for doing this automatically is a bit of an overkill for me 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.
methyl 9y ago
> Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors. 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.
- drinchev 9y ago
  Not really overflow: hidden. Just position: relative. Take look at Balloon.css 1: https://kazzkiq.github.io/balloon.css/ 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.
miketery 9y ago
Gradients are coming back. Its a contrast to the flat. I remember I first noticed it on github's conference page. I see them everywhere now (Asana is another). https://githubuniverse.com/ https://githubuniverse.com/
kccqzy 9y ago
My own favorite is a table that can selectively show hide columns. Just make the button to show/hide a label that controls a hidden checkbox which then controls the display property of cells.
limeblack 9y ago
I may be against the norm but I actually prefer it most of the time when people don't modify the ::selection color and background.

jypepin 9y ago

came here to say the same. First few examples are about float and cleafix - I haven't faced those in years now! 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/ https://a.singlediv.com/ from Lynn Fisher, she draws some pretty awesome stuff mostly with linear-gradients :)

andrewingram 9y ago

You can make sure the tooltip flips position to avoid going off the edge of the screen using just CSS?

Someone1234 9y ago
I'm curious to know this too. A responsive "pull-right" that sends an element to the right hand screen edge no matter the screen size, without having it shift onto the line below. I'm sure it can be done if you create enough media selectors for every common resolution but outside of that...
drinchev 9y ago
You can position the tooltip on the left, right, top, bottom in the markup with a class name. This way if the tooltip is in the header you can use e.g. `tooltip-bottom`. Having 10kb tooltip library for doing this automatically is a bit of an overkill for me [1]. 1 : https://atomiks.github.io/tippyjs/ https://atomiks.github.io/tippyjs/
- nawgszy 9y ago
  >Having 10kb tooltip library for doing this automatically is a bit of an overkill for me 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.

methyl 9y ago

> Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors. 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.

drinchev 9y ago
Not really overflow: hidden. Just position: relative. Take look at Balloon.css 1: https://kazzkiq.github.io/balloon.css/ 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.

miketery 9y ago

Gradients are coming back. Its a contrast to the flat. I remember I first noticed it on github's conference page. I see them everywhere now (Asana is another). https://githubuniverse.com/ https://githubuniverse.com/

kccqzy 9y ago

My own favorite is a table that can selectively show hide columns. Just make the button to show/hide a label that controls a hidden checkbox which then controls the display property of cells.

limeblack 9y ago

I may be against the norm but I actually prefer it most of the time when people don't modify the ::selection color and background.