[Tooltip] Allow placement to be below cursor

Traditional title attributes make the popup display under the mouse cursor - it would be great if we could replicate this behaviour using the Tooltip component, maybe with <Tooltip placement="cursor" />.

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

[Morcatko]

This works for me

  const [position, setPosition] = React.useState({ x: undefined, y: undefined });

  return <Tooltip
      ...
      onMouseMove={e => setPosition({ x: e.pageX, y: e.pageY })}
      PopperProps={{
        anchorEl: {
          clientHeight: 0,
          clientWidth: 0,
          getBoundingClientRect: () => ({
            top: position.y,
            left: position.x,
            right: position.x,
            bottom: position.y,
            width: 0,
            height: 0,
          })
        }
      }}
    >
    {...}
    </Tooltip>

[oliviertassinari]

@ahtcx Here is a working implementation:

--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -145,6 +145,9 @@ class Tooltip extends React.Component {
     const { children, enterDelay } = this.props;
     const childrenProps = children.props;

+    this.pageX = event.pageX
+    this.pageY = event.pageY
+
     if (event.type === 'mouseover' && childrenProps.onMouseOver) {
       childrenProps.onMouseOver(event);
     }
@@ -340,7 +343,21 @@ class Tooltip extends React.Component {
             [classes.popperInteractive]: interactive,
           })}
           placement={placement}
-          anchorEl={this.childrenRef}
+          anchorEl={this.childrenRef ? {
+            clientWidth: this.childrenRef.clientWidth,
+            clientHeight: this.childrenRef.clientHeight,
+            getBoundingClientRect: () => {
+              const rect = this.childrenRef.getBoundingClientRect()
+              return {
+                left: this.pageX,
+                bottom: rect.bottom,
+                height: rect.height,
+                right: rect.right,
+                width: rect.width,
+                top: this.pageY,
+              }
+            },
+          } : null}
           open={open}
           id={childrenProps['aria-describedby']}
           transition

This is just a quick hacking. If you want to take the time to consolidate the implementation, we can talk about it. Alternatively, you can use the existing API to build the feature on top of it.