StateOfCSS-2020 icon indicating copy to clipboard operation
StateOfCSS-2020 copied to clipboard

Tooltips content gets cutoff if it is too long.

Open Klarence opened this issue 5 years ago • 5 comments

On https://2020.stateofcss.com/en-US/demographics/, when hovering over the Non-Binary/Third Gender section (red) the tooltips contents is not readable. Also for the last section Prefer not to say(grey) I can see a 2 but no %.

Zooming out helps but it is still and issue.

Klarence avatar Dec 02 '20 22:12 Klarence

Seems to be an issue with most graphs with a very small percentage section at the end.

Klarence avatar Dec 02 '20 22:12 Klarence

Oh, I guess we would need for the tooltips to detect the edge of the viewport and adjust accordingly… That might be tricky @plouc ?

SachaG avatar Dec 02 '20 23:12 SachaG

@SachaG, yes it's tricky, some of the built-in nivo charts use the chart boundaries, others don't and would be an issue anyway for example for the features/tools distribution charts as each bar is an individual chart, that's something I'd like to address in nivo, but there's already a lot of work planned on other features, so it won't happen any time soon.

plouc avatar Dec 03 '20 03:12 plouc

Maybe moving the "#%" to the beginning for now? Since the category text is a bit redundant. For Example, "#%: Never Heard of it/Not Sure" vs "Never Heard of it/Not Sure: #%" https://2020.stateofcss.com/en-US/features/layout/

Klarence avatar Dec 03 '20 04:12 Klarence

Just realized the tooltip is probably built into nivo. So, my suggestion may not be an option.
But it seems there may be some customizability since the chart legend says "Never Heard of it", and the tooltip adds "/Not Sure".

Klarence avatar Dec 03 '20 04:12 Klarence