Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Tooltip issue on scroll
See original GitHub issueIf 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”.
- This is not a v0.x issue.
- 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 |
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@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:
I hope it helps. Nice UI overrides by the way 😃.
@metju90 I’m sorry, I don’t understand. It looks all right to me.