feat: add a generic Tooltip component

[eh-am]

Replace our Tooltip for material ui's one:

Changed it to have the same look and feeling as the previous one.

Also add a TooltipInfoIcon that we can reuse anywhere.

---

Api is

    <Tooltip title="my title">
      <MyComponentThatWillTriggerTheTooltipOnHover />
    </Tooltip>

Some features:

• It triggers by default on hover (although that can be overriden https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/Tooltip/Tooltip.tsx#L601)
• It auto positions correctly depending on the viewport (eg it never goes off the screen, also if there's not enough space let's say below the component, it renders on the top)
• title can take any react component, not only strings!
• accessibility (eg trigger on keyboard focus)
• It supports 12 different positions
• For more features see https://mui.com/material-ui/react-tooltip/#customization

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
webapp/public/assets/app.js	481.42 KB (+8.19% 🔺)	9.7 s (+8.19% 🔺)	3.2 s (+5.2% 🔺)	12.8 s
webapp/public/assets/app.css	17.93 KB (+0.27% 🔺)	359 ms (+0.27% 🔺)	0 ms (+100% 🔺)	359 ms
webapp/public/assets/styles.css	9.5 KB (0%)	191 ms (0%)	0 ms (+100% 🔺)	191 ms
packages/pyroscope-flamegraph/dist/index.js	128.33 KB (+39.21% 🔺)	2.6 s (+39.21% 🔺)	1.7 s (+85.61% 🔺)	4.3 s
packages/pyroscope-flamegraph/dist/index.node.js	128.76 KB (+39.84% 🔺)	2.6 s (+39.84% 🔺)	636 ms (+28.24% 🔺)	3.3 s
packages/pyroscope-flamegraph/dist/index.css	7.5 KB (+1.38% 🔺)	150 ms (+1.38% 🔺)	0 ms (+100% 🔺)	150 ms

[codecov]

Codecov Report

Base: 66.88% // Head: 66.76% // Decreases project coverage by -0.13% ⚠️

Coverage data is based on head (0007891) compared to base (82bf47b).
Patch coverage: 33.34% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1643      +/-   ##
==========================================
- Coverage   66.88%   66.76%   -0.12%     
==========================================
  Files         148      147       -1     
  Lines        5018     5008      -10     
  Branches     1150     1149       -1     
==========================================
- Hits         3356     3343      -13     
- Misses       1657     1659       +2     
- Partials        5        6       +1     

Impacted Files	Coverage Δ
webapp/javascript/ui/Button.module.scss	61.54% <ø> (ø)
webapp/javascript/ui/Tooltip.module.scss	53.85% <ø> (ø)
webapp/javascript/ui/Button.tsx	77.15% <14.29%> (-4.67%)	⬇️
...ages/pyroscope-flamegraph/src/SharedQueryInput.tsx	64.52% <50.00%> (-0.09%)	⬇️
webapp/javascript/ui/Tooltip.tsx	72.73% <50.00%> (-14.77%)	⬇️
webapp/javascript/components/RefreshButton.tsx

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[eh-am]

One thing here is that I don't think the contrast against the background is good. IMO we should flip dark/light so that it has a "light" aspect.

[Rperry2174]

One thing here is that I don't think the contrast against the background is good. IMO we should flip dark/light so that it has a "light" aspect.

what if we add a slight background shadow to it?

[eh-am]

/create-server