[ToolTip] Tables with ToolTips create extra space on screen

[pealmeid]

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

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)

1. Open Material-UI's 'Tables' demo (https://material-ui.com/demos/tables/) on Chrome;
2. Open developer tools (F12);
3. Toggle device toolbar to simulate mobile device (on dev tools screen);
4. Drag screen to the left;

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

Tech	Version
Material-UI	v1.0.0-beta.47
browser	Chrome 66.0.3359.139

[quisido]

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.

[quisido]

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 offsetParents.

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.

[DayBr3ak]

I've also experienced this issue. A tooltip within a scrollbar is rendered outside of it

[franklixuefei]

This issue #10909 is related. I think we should tackle it.

[plnichols]

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">

[oliviertassinari]

@plnichols https://material-ui.com/getting-started/usage/#responsive-meta-tag ;)