[Tooltip] Fix children mouse over detection (#32321)

packages/mui-material/src/Tooltip/Tooltip.js

@@ -372,10 +372,14 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
       return;
     }
 
+    // Workaround for https://github.com/facebook/react/issues/7769
+    if (!childNode) {
+      setChildNode(event.currentTarget);
+    }
     // Remove the title ahead of time.
     // We don't want to wait for the next render commit.
     // We would risk displaying two tooltips at the same time (native + this one).
-    if (childNode) {
+    else {
       childNode.removeAttribute('title');
     }
 
@@ -420,8 +424,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const handleFocus = (event) => {
     // Workaround for https://github.com/facebook/react/issues/7769
-    // The autoFocus of React might trigger the event before the componentDidMount.
-    // We need to account for this eventuality.
     if (!childNode) {
       setChildNode(event.currentTarget);
     }

packages/mui-material/src/Tooltip/Tooltip.test.js

@@ -433,6 +433,23 @@ describe('<Tooltip />', () => {
       expect(getByRole('tooltip')).toBeVisible();
       expect(handleFocus.callCount).to.equal(1);
     });
+
+    it('should handle `onMouseOver` forwarding', () => {
+      const handleMouseOver = spy();
+      const { getByRole } = render(
+        <Tooltip enterDelay={100} title="Tooltip">
+          <button id="testChild" type="submit" onMouseOver={handleMouseOver}>
+            Hello World
+          </button>
+        </Tooltip>,
+      );
+
+      fireEvent.mouseOver(getByRole('button'));
+      clock.tick(100);
+
+      expect(getByRole('tooltip')).toBeVisible();
+      expect(handleMouseOver.callCount).to.equal(1);
+    });
   });
 
   describe('prop: delay', () => {