Material-ui: Tooltip issue on scroll

[metju90]

If you fast-scroll while a tooltip its being shown, the tooltip remains visible for a short period. The problem is, that its being visible over HTML elements which it should not be on.

In my particular case, I have a modal which contains several nested HTML elements. In one of the deeply nested elements, I am using material-ui's Tooltips. From what I could see, tooltips are appending to the body and therefore adding overflow:visible to any element in my modal wont affect the tooltip which have position:absolute with it's parent element being the body.

The problem is being cause by the title props (docs here)

In the following example, keep observing the tooltip. On scroll up and down, the tooltip moves with its parent element with the only and big difference that its parent element gets hidden and the tooltip does not.

If you abserve closely, you can see similar behavor on material-ui.com page too (the GIF is not perfect but at one point you can see the tooltip "overlaying the fixed, sticky, blue header".

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

Expected Behavior 🤔

On scroll tooltip should not overlay any elements.

Current Behavior 😯

On scroll tooltip is overlaying elements for a very short period of time which is providing a buggy UX.

Steps to Reproduce 🕹

Whilst the first example may be easier to spoit the issue, the issue is visible at least on material-ui.com page. Check this page, hover over an icon and do a fast scroll down, to reproduce the issue shown in my second GIF.

I can provide steps to reproduce my first example if its neccessary.

| Tech | Version |
|--------------|---------|
| Material-UI | v3.5.1 |
| React | ^16.7.0 |
| Browser | Chrome |

[oliviertassinari]

@metju90 I'm sorry, I don't understand. It looks all right to me.

[metju90]

Hey @oliviertassinari

Sorry if I was not clear initially. I rephrased my description. I also included a new example of the "issue". I hope it is an issue because if its not, its very bad for UX IMO.

[oliviertassinari]

@metju90 Thank you for spending more time describing the issue. The browser pauses the events for a long period of time when the users are scrolling. It helps to keep 60 FPS. In our case, the browser defers the call of the mouseleave event. It's why you will keep seeing the tooltip. Now, there is a workaround. You can disable the portal feature with:

<Tooltip PopperProps={{ disablePortal: true }} />

I hope it helps. Nice UI overrides by the way :).

[metju90]

That solved the issue. Thank you very much!!

[MikeSquall]

Hi,

I am experiencing a similar issue in a table.

I tried to add PopperProps={{ disablePortal: true }} but it causes me some other trouble due to the fact it creates a div inside the table.

Would you have an idea of what to do to fix this behavior ?
Thanks