Page MenuHome

Update the design of tooltips

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



Update the design of tooltips


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.


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.

Julian Eisel (Severin) updated this revision to Unknown Object (????).Jun 20 2014, 4:10 PM

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!

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.

Julian Eisel (Severin) updated this revision to Unknown Object (????).Jun 23 2014, 7:51 PM

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.


Name SUBMENU isnt very helpful/informative.


UI_TIP_HEADER excludes UI_TIP_PYTHON, these shouldn't be flags.


Overrides shouldnt change source data.


hard-coded values here isnt great, should use UI_TIP_LC_ACTIVE, also. fstyle can be made to enable shadow


modifying style directly is bad practice. use a copy.


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 ! ;-)

committed to master, closing