[Tooltip] Tooltip touch the edge

[oliviertassinari]

Steps to reproduce 🕹

Link to live example:

Steps:

1. https://codesandbox.io/s/cranky-napier-rghkwn
2. This feels off. I first saw this in https://github.com/mui/material-ui/issues/23232#issuecomment-715991707

Current behavior 😯

Expected behavior 🤔

Context

• Material UI handles this a bit better:

  https://github.com/mui/material-ui/blob/e64928daf64fcce9702e2659e44ecb348aa97403/packages/mui-material/src/Tooltip/Tooltip.js#L130

  though we might want 4px, it feels much better than 2px. But note that the implementation of it in Material UI is broken, the 2px is also included for the start positioning placement 🙈. We need to fix this too.

• The Popover component has a marginThreshold prop for this very use case.

Benchmark

• Radix Primitive solves this with a custom collisionPadding prop on the Popper.

  • demo: https://codesandbox.io/p/sandbox/zen-fast-kdcg9t?file=%2FApp.jsx%3A17%2C29
  • docs: https://www.radix-ui.com/docs/primitives/components/popover
  • source: https://github.com/radix-ui/primitives/blob/eca6babd188df465f64f23f3584738b85dba610e/packages/react/popper/src/Popper.tsx#L169

Off-topic

I really feel the lack of animation on the tooltip in Joy UI, I wouldn't use this component as is in a side-project. I think it's x10 more important to fix the transition than this issue that I opened here 😁.

Your environment 🌎

@mui/joy v5.0.0-alpha.84

cc @siriwatknp

Search keywords:

[siriwatknp]

Off-topic, I really feel the lack of animation on the tooltip, it feels rusty without it. I think it's much most important to fix than this issue that I opened here 😁.

@oliviertassinari animation/transition is tracked here https://github.com/mui/material-ui/issues/36695.

[gitstart]

@oliviertassinari I would like to pick this up

[oliviertassinari]

Radix UI solves this with a custom collisionPadding prop on the Popper.

• demo: https://codesandbox.io/p/sandbox/zen-fast-kdcg9t?file=%2FApp.jsx%3A17%2C29
• docs: https://www.radix-ui.com/docs/primitives/components/popover
• source: https://github.com/radix-ui/primitives/blob/eca6babd188df465f64f23f3584738b85dba610e/packages/react/popper/src/Popper.tsx#L169

[oliviertassinari]

I think we depends on a fix in Base UI: https://github.com/mui/base-ui/issues/39.

[michaldudak]

This is no longer an issue with the new Tooltip component.

[oliviertassinari]

🎉 super cool

https://master--base-ui.netlify.app/components/react-tooltip/

vs.

https://mui.com/material-ui/react-tooltip/