[Tooltip] Improve handling of small vs. touch screens

[oliviertassinari]

Closes #23363

I gave a second look at the issue. Since my last proposal #23363, I have changed a bit my hypothesis and conclusion. At first, I thought that using the screen width to change the density of the tooltip would make the most sense, but I realized that with responsive font sizes, we do the opposite, we reduce the font size, we don't increase it. Also, these density visual changes seem to contribute to increasing the gap, which uses styleProps.touch too.

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against ba13a9c

[eps1lon]

This is the opposite of what we should do. We should rely on CSS not JS

[oliviertassinari]

At the UX level. What's the expected behavior? As far as I understand, we have the following constraints to satisfy:

1. There are two variant styles, one for mouse (no matter the screen width) and one for touch interactions.
2. touch interactions can be triggered even if the primary pointing device is a mouse, e.g. Windows surface.
3. touch interactions can be displayed on large screens, e.g. Windows surface.

We should rely on CSS not JS

Yes CSS > JS, but does it mean that CSS-only would work here? I couldn't find a CSS solution that satisfies the above. If there is one, then great, let's use it.

Note that it's not the problem I'm going after (CSS over JS). This could be done as a follow-up as we already depend on it. The problem I'm going after is to satisfies the above 3 UI/UX constraints.