Devographics / StateOfCSS-2020

The State of CSS 2020 survey results
https://2020.stateofcss.com
Other
45 stars 12 forks source link

Tooltips content gets cutoff if it is too long. #25

Open Klarence opened 3 years ago

Klarence commented 3 years ago

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 commented 3 years ago

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

SachaG commented 3 years ago

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

plouc commented 3 years ago

@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.

Klarence commented 3 years ago

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 commented 3 years ago

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".