DIM
DIM copied to clipboard
Tooltip redesign round two
This PR addresses some tooltip design follow up from #8602 and #8626:
- Increased padding within tooltip sections.
- Increased tooltip arrow size from
10px
to16px
(minimal tooltip arrow size is unchanged). - Increased strength of tooltip drop shadow.
- The upper border of colored tooltip sections now matches the tooltip background to stand out less.
- Rounded the corners of the tooltip.
- Minimal tooltips no longer have a border and use a lighter background color.
Some things I like about this variant:
- Increased padding makes the content feel less cramped.
- Removing the interior borders makes the tooltip look like a single surface instead of several stacked boxes.
- The stronger drop shadow gives the tooltip more depth and add more contrast.
- The rounded corners are a departure from DIM's usual sharp corners, but I think this is a benefit. Because they contrast against the right angles, I find it easier to understand the tooltip's bounds, which pulls my eyes to the tooltip content. I think this is also helped by the slight curvature at the tooltip's upper corners caused by the border width changing.
I'm still not totally happy with the tooltips, but I think this is a step in the right direction. Keen to hear others' thoughts and I'm happy to keep iterating on this.
The padding is nice. I like elbow room. The tooltip is very obvious in the screenshot. This change is good.
I'm indifferent about the rounded corners. It wasn't an issue, and the change didn't seem to make a difference to me. I am fine going ahead with making the change unless there is a design system or prior choice here.
I've cleaned up the upper corners of the tooltip where the border colour changes:
Merging this to get some eyes on it before the new season launches, happy to iterate on it further though.