Material-ui: [Tooltip] Unmount Tooltip on exit and mount on enter

[franklixuefei]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Ideally I'd like an option to configure the Tooltip to unmountOnExit and mountOnEnter

Current Behavior

Seems like there is no easy way to achieve that.

Context

In my project, I need to place a lot of Tooltip helpers, and there are a bunch of Tooltip DOM elements that were created under body. This I think impacts the performance.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | beta.40 |
| React | 16.20 |
| browser | |
| etc | |

[oliviertassinari]

@franklixuefei I agree, I think that it would be great to move the transition implementation of the tooltip into it's own component. It's what we do with the Modal for instance. This should allow us to solve this issue and allow people to implement custom transitions.

[dmythro]

I'd not suggest to unmount tooltips for Accessibility reasons. Often adding a tooltip specifies aria to be labeled by this tooltip (especially if it is an icon), so it has to be in DOM so screen reader can actually read it properly.

[franklixuefei]

@z-ax I didn't think of the Accessibility part. Good point. However, I've already noticed a big perf cut introduced by Tooltips not being unmounted upon disappearance, especially when they are enabled for cells in a table with lots of rows. Switching between pages has become chunky and laggy because of this. (I verified by taking out the tooltips from the table cells, and the perf dramatically boosted).
So I guess for the Accessbility part, we need to come up with something else.

[dmythro]

I've seen the Popper dependency was upgraded in v1.2.2. @franklixuefei, is performance still an issue? Just curious :) We don't have tooltips for table cells to test quickly, but overall didn't see any performance problems recently.

[oliviertassinari]

@z-ax It's worse with [email protected]. I have reverted to v0.x. I'm might use popper.js directly in the future.

[matthiasp42]

I also had dramatic performance issues using Tooltip in a list and then scrolling. I'm assuming this is caused by Popper constantly reevaluating every items position.

I made a drop-in replacement for material-uis Tolltip that solves this issue by only rendering the Tooltip when the mouse is over the childrens element.

https://gist.github.com/matthiasp42/c561fe09f86b61e364bdd23369be5485

I'm sharing it here so it may help somebody else, but also I would love some feedback on my solution, or if this is for some reason not a proper way to do it.

[oliviertassinari]

I also had dramatic performance issues using Tooltip in a list and then scrolling

Yes, it's a recent regression. It's already fixed on master. We will soon release the fix.