vega-tooltip icon indicating copy to clipboard operation
vega-tooltip copied to clipboard

[Tooltip] Left-align field name in tooltips

Open fandu-db opened this issue 2 years ago • 5 comments

A very subjective proposal -- it appears to me that "left-aligned field name" in tooltip looks slightly better and is also more commonly seen in visualization tools (e.g., Tableau).

image

fandu-db avatar Aug 12 '22 16:08 fandu-db

Thanks for the feedback. I find it easier to read what values correspond to each other especially when the labels get long. Luckily, this can easily be changed in CSS. Unless there are strong reasons to change this, I think I'd just leave it.

domoritz avatar Aug 12 '22 17:08 domoritz

I actually strongly prefer Fan's proposed design because readers can scan and read the field names faster if they are left aligned.

Plus if we add legend for color in a follow up PR, the symbols will be aligned if we do left aligned. (But they won't if we keep right alignment.)

kanitw avatar Aug 16 '22 15:08 kanitw

I see. I am okay with changing the design. We should limit the width of the field name column so that it doesn't become to difficult to make the correspondance to the values. Do you want to send a pull request?

domoritz avatar Aug 16 '22 17:08 domoritz

Many thanks @domoritz @kanitw for supporting this! Yes, we will send a PR.

Great point on "limit the width of the field name column" For handling long field names, we can probably try line wrap and/or truncation (w/ ...) Wonder if you have a preference or other ideas

fandu-db avatar Aug 16 '22 17:08 fandu-db

I'd prefer wrap and if we truncate definitely add a tooltip to see the full text.

domoritz avatar Aug 16 '22 20:08 domoritz