[Tooltip] Improve legibility

[leMaik]

...and increase font weight on desktop to improve readability

The specs only tell us about the background color and opacity (instead of setting the opacity of the whole element).

Increasing the font weight a bit improves the readability of a 10px font on normal desktop displays (i.e. no high-dpi ones). It's an opinionated change.

Before:

After:

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes.

Comparing: 6bb9231...a7a08ad

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.03% 🔺	+0.04% 🔺	368,525	368,621	91,360	91,396
@material-ui/core/Paper	0.00%	0.00%	76,647	76,647	19,297	19,297
@material-ui/core/Paper.esm	0.00%	+0.01% 🔺	71,595	71,595	18,771	18,772
@material-ui/core/Popper	0.00%	-0.01%	30,462	30,462	10,584	10,583
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	17,286	17,286	5,720	5,720
@material-ui/core/useMediaQuery	0.00%	0.00%	2,486	2,486	1,054	1,054
@material-ui/lab	+0.05% 🔺	+0.06% 🔺	182,793	182,889	50,217	50,246
@material-ui/styles	0.00%	0.00%	57,708	57,708	16,237	16,237
@material-ui/system	0.00%	0.00%	17,062	17,062	4,486	4,486
Button	0.00%	-0.00%	99,068	99,068	26,484	26,483
Modal	0.00%	-0.00%	98,649	98,649	26,152	26,151
colorManipulator	0.00%	0.00%	3,232	3,232	1,297	1,297
docs.landing	0.00%	0.00%	49,899	49,899	10,728	10,728
docs.main	+0.01% 🔺	+0.06% 🔺	677,542	677,641	205,746	205,864
packages/material-ui/build/umd/material-ui.production.min.js	+0.02% 🔺	+0.01% 🔺	319,754	319,832	84,598	84,603

Generated by 🚫 dangerJS against a7a08ad

[eps1lon]

Argos showcases the improved legibility: https://www.argos-ci.com/mui-org/material-ui/builds/43021. Very nice 👍

[lucaas]

I like the improved readability, but would it be possible to base the background color on a theme variable so that it still is easily customized? I use slightly tinted grey colors in my theme.

[eps1lon]

I like the improved readability, but would it be possible to base the background color on a theme variable so that it still is easily customized? I use slightly tinted grey colors in my theme.

@lucaas You can do that by overriding the used color when creating your own theme.
Please open a separate issue if this doesn't help. This change doesn't affect the customizability of the Tooltip.

[lucaas]

I missed commit a7a08ad which addressed my concern, so you can disregard from my comment.