Update the design of tooltips
AbandonedPublic
Actions

Authored by Campbell Barton (campbellbarton) on Jun 20 2014, 1:06 AM.

Details

Reviewers

Julian Eisel (Severin)

Maniphest Tasks

T37478: Improve Tooltips to provide more information

Summary

Update the design of tooltips

Motivation

Currently, tooltips in Blender are a bit ugly (to put it plainly) and don't filter the importance of the information visually. Or in other words, they don't draw the user's eye. So, we need a new design that does this.

Screenshots

The patch includes:

Updated colors to filter information visually
Use the mouse position to calculate the tooltip position (previously it used the button it was referring to)
Some smaller design decisions, like adding paddings, using left alignment, display the active value in the header

Some personal comments

I'm following this mockup from Plyczkowski:
As you can see, he uses a bold font for the header. But after some discussions at IRC with @Campbell Barton (campbellbarton), @Antonis Ryakiotakis (psy-fi) and others, we decided to not include a bold font in blender (for now) to avoid memory overhead
@Thomas Dinges (dingto) already tested this with retina display, no problems there
I've further plans to improve tooltips, but I'm going to create different patches for these

Diff Detail

Event Timeline

Nice. Looks more readable, easier to scan, the priority of information is presented better (even without the bold font), and the Python part seems less scary. LGTM at this point.

Patch needs a bit of a cleanup.
Python text is hard to read here, differentiating information is fine - but making hard to read is not acceptable.

Some cleanup plus brighter python text
(to satisfy campbell ;)

Could you post screenshots along with updates please, thanks.

sry @Paweł Łyczkowski (plyczkowski), I forgot to add screenshots.
So here you have some (changes are really minimal but make the python part a lot more readable IMO):

Thanks for your feedback!

Yeah, looks better.

These are really nice, yet subtle improvements. I haven't found any problems. Nice work.

Looks good, Ill review for inclusion this week.

Great work Severin, so much more readable now. That is a good idea to not draw python tooltips in blue, before that was too much eye-catching.

And yes, it is as readable as it is (with the bright) as it can be with the bold font.

But i think the python part is a bit hard to read when the tooltip is over a grey background (like on the first screenshot).

@Lapineige Thanks for the feedback!
I've already brighten up the python part a little bit, see the screenshots on my previous comment.

Display Python text in monospaced font, plus minor fixes

Up to date screenshots:

Going over the patch, there are quite a few issues, Ill resolve... but to note for later.

source/blender/editors/interface/interface_regions.c
153	Name SUBMENU isnt very helpful/informative.
161	UI_TIP_HEADER excludes UI_TIP_PYTHON, these shouldn't be flags.
252	Overrides shouldnt change source data.
268	hard-coded values here isnt great, should use UI_TIP_LC_ACTIVE, also. fstyle can be made to enable shadow
278	modifying style directly is bad practice. use a copy.
279	This fails for high-resolution displays (where `U.pixelsize == 2`)

Committed most of this patch rB16baa8c273e0c344dcf985205e43957591cf5ad6

addressed all issues mentioned.

Leaving open, awaiting response regarding tip placement.

Severin: i had seen that screen, before to say that.
But the newest are realy great; hightly readable, with very good differentiation between all kind of informations.
In term of UI, it is perfect i think.

@Lapineige to hear that somebody uses the term perfect to describe the results of my work makes me a happy man ;) Thanks a lot for this!

@Julian Eisel (Severin): When that's perfect i'm obliged to say that's perfect ^^
I just trying the feature, very cool, great job. That is hugely more readable now !
I just can't wait for others like this ! ;-)