diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 5cbf56f444d280..1246561c576ddc 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -280,7 +280,11 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
const handleEnter = event => {
const childrenProps = children.props;
- if (event.type === 'mouseover' && childrenProps.onMouseOver) {
+ if (
+ event.type === 'mouseover' &&
+ childrenProps.onMouseOver &&
+ event.currentTarget === childNode
+ ) {
childrenProps.onMouseOver(event);
}
@@ -330,7 +334,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
}
const childrenProps = children.props;
- if (childrenProps.onFocus) {
+ if (childrenProps.onFocus && event.currentTarget === childNode) {
childrenProps.onFocus(event);
}
};
@@ -360,13 +364,17 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
const childrenProps = children.props;
if (event.type === 'blur') {
- if (childrenProps.onBlur) {
+ if (childrenProps.onBlur && event.currentTarget === childNode) {
childrenProps.onBlur(event);
}
handleBlur(event);
}
- if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
+ if (
+ event.type === 'mouseleave' &&
+ childrenProps.onMouseLeave &&
+ event.currentTarget === childNode
+ ) {
childrenProps.onMouseLeave(event);
}
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index 870e1ac9d699ea..502b22568ea946 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -1,5 +1,6 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
import PropTypes from 'prop-types';
import { spy, useFakeTimers } from 'sinon';
import consoleErrorMock from 'test/utils/consoleErrorMock';
@@ -227,17 +228,17 @@ describe('', () => {
);
const children = container.querySelector('#testChild');
focusVisible(children);
- assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 0);
+ expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(0);
clock.tick(111);
- assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 1);
+ expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(1);
document.activeElement.blur();
clock.tick(5);
clock.tick(6);
- assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 0);
+ expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(0);
focusVisible(children);
// Bypass `enterDelay` wait, instant display.
- assert.strictEqual(document.body.querySelectorAll('[role="tooltip"]').length, 1);
+ expect(document.body.querySelectorAll('[role="tooltip"]').length).to.equal(1);
});
it('should take the leaveDelay into account', () => {
@@ -285,6 +286,19 @@ describe('', () => {
assert.strictEqual(handler.callCount, 1);
});
});
+
+ it('should ignore event from the tooltip', () => {
+ const handleMouseOver = spy();
+ const { getByRole } = render(
+
+
+ ,
+ );
+ fireEvent.mouseOver(getByRole('tooltip'));
+ expect(handleMouseOver.callCount).to.equal(0);
+ });
});
describe('disabled button warning', () => {