Closed pealmeid closed 6 years ago
Can verify this. We moved to custom-made tooltips because of this issue. This happens even outside of tables.
I believe this happens on pages with scrollbars, but I may be incorrect. This is due to scrolling. The following is some information that I found useful when creating custom a tooltip component.
This is how I positioned my custom tooltips:
let offsetTop = 0;
let offsetParent = this.rootRef;
while (
offsetParent !== null &&
offsetParent !== document.body &&
offsetParent.nodeName.toLowerCase() !== 'html'
) {
offsetTop += offsetParent.offsetTop;
offsetTop -= offsetParent.scrollTop;
offsetParent = offsetParent.offsetParent;
}
I experienced very similar results to the MUI positioning when I didn't substract offsetParent.scrollTop
from the calculated offsetTop
for the tooltip.
A horizontal scroll may be caused by a similar issue and need to have all of its parent's scrollLeft
subtracted.
Upon further inspection, I do believe this is the case. The most egregiously positioned tooltip in the OP's link (Table demo) is the "Sort" tooltip that belongs to the Nutrition table (the furthest-right column).
Noticeably, the Nutrition table, when in mobile view, has a horizontal scrollbar, and the tooltips (plural) that are appearing to the right of the screen are positioned where the table would have them if it were not overflowing!
That is to say, tooltips are appearing in locations as if their parents were not overflow:scroll
or overflow:hidden
.
Either they need to be removed from the DOM until visible, or they need to have their offset adjusted until they are in view of the overflowing parent.
Sorry, correction to the above algorithms:
let offsetTop = 0;
let parentNode = this.rootRef;
let nextOffsetParent = this.rootRef;
while (
parentNode !== null &&
parentNode !== document.body &&
parentNode.nodeName.toLowerCase() !== 'html'
) {
offsetTop -= parentNode.scrollTop;
if (parentNode === nextOffsetParent) {
offsetTop += parentNode.offsetTop;
nextOffsetParent = parentNode.offsetParent;
}
parentNode = parentNode.parentNode;
}
You want to subtract the scrollTop
of every parent node, but only add the offsetTop
of every offsetParent
s.
I don't know if the current positioning system already does this or not.
It may simply be the case that you just don't want the tooltips to exist in the DOM until they are open.
I've also experienced this issue. A tooltip within a scrollbar is rendered outside of it
This issue #10909 is related. I think we should tackle it.
I was still having the same issue, even with the merged Tooltip implementation changes #12085. The solution for me was to add minimum-scale=1
to my meta viewport - like the Material-UI demo site.
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
Expected Behavior
Dragging the screen on mobile devices shouldn't move it.
Current Behavior
On screens with tables with tooltips located outside the visible area, the screen moves when you drag it on mobile devices (or Chrome's developer tools screen).
Steps to Reproduce (for bugs)
Example:
For comparison: Same dragging movement on another screen without tables and tooltips:
Context
I'm trying to create a sorted table with tooltips and using the demo source as starting point. Noticed this happening and thought it was my mistake until noticing it also happens on the demo page. This only happens if the table has tooltips. If it does not, you cannot drag the screen (as expected).
Your Environment