[Tooltip] Using custom component as children not working

Using custom components as children of tooltip is not working

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Tooltip does not work

Expected Behavior 🤔

Tooltip should work after forwarding the ref

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-0yx08?file=/IconButton.js Steps:

1. Create a custom component that contains a simple button element
2. Use the custom component as children of Tooltip
3. Notice how tooltip does not work

Context 🔦

Using custom components as children of tooltip is not working

Your Environment 🌎

USE SANDBOX LINK

[dfernandez-asapp]

@oliviertassinari I think what is missing in the docs and catch me by surprise too is that the Tooltip implementation relies on passing the onMouseOver, onMouseLeave, onFocus, onBlur, onTouchStart, and onTouchEnd event handlers to the children. See: https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Tooltip/Tooltip.js#L425

The documentation says that you only need an element that is able to hold a ref, but that’s not what is happening in the code. I wonder if it makes sense to change the code use useEffect and use a DOM event handler.

[dfernandez-asapp]

If I understood correctly the proposed change is to pass props to the element.

That works. My expectation as a user is that any component with a ref will work, so the workaround breaks my expectation. If that is the design decision, is ok… it should be added to the docs (probably a TS interface will help to catch errors early, for the ones that use TS). Also is interesting that the code relies on onMouseOver but not on onMouseEnter because of a bug barely commented in the code… so basically it makes the child component dependent on the tooltip internals.

Design matters aside, honestly, I didn’t run into this issue before because I was using a div or another MUI component as a child of the tooltip. So it may not be an issue for many users. Is possible to re-implement the code so it only relies on the ref. That tooltip code is already intricate, so I’m not sure about it (I’ll love to help, but right now I’m unable to, sorry).

I don’t know how good or bad is to rely on effects and addEventListener, if you have a table of many elements it will add many listeners…(unlike React that uses a single event handler) that was a concern at the time of IE8 but probably the popper stuff and the React hooks are “heavier” than that. If I have to re-implement the tooltip from scratch I’ll go with the useEffect route… is not so React-ish but it will work with any component without having to rely on the children props interface.