Implement fix for MouseOver event not firing when cursor enters after…

… leaving a disabled element

UNRELEASED.md

@@ -19,6 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixed a regression introduced in #1247, where icons inside of `Link` would always be recolored to match the text color ([#1729](https://github.com/Shopify/polaris-react/pull/1729))
+- Fixed a bug preventing the display of `Tooltip` when cursor enters from a disabled element ([#1783](https://github.com/Shopify/polaris-react/pull/1783)).
 
 ### Documentation
 

src/components/Tooltip/Tooltip.tsx

@@ -43,6 +43,7 @@ export default class Tooltip extends React.PureComponent<Props, State> {
 
   private id = getUniqueID();
   private activatorContainer: HTMLElement | null;
+  private mouseEntered = false;
 
   componentDidMount() {
     this.setAccessibilityAttributes();
@@ -87,8 +88,8 @@ export default class Tooltip extends React.PureComponent<Props, State> {
         testID="WrapperComponent"
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
-        onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
+        onMouseOver={this.handleMouseEnterFix}
         ref={this.setActivator}
       >
         {children}
@@ -121,9 +122,19 @@ export default class Tooltip extends React.PureComponent<Props, State> {
   };
 
   private handleMouseLeave = () => {
+    this.mouseEntered = false;
     this.setState({active: false});
   };
 
+  // https://github.com/facebook/react/issues/10109
+  // Mouseenter event not triggered when cursor moves from disabled button
+  private handleMouseEnterFix = () => {
+    if (!this.mouseEntered) {
+      this.mouseEntered = true;
+      this.handleMouseEnter();
+    }
+  };
+
   private setAccessibilityAttributes() {
     const {activatorContainer, id} = this;
     if (activatorContainer == null) {

src/components/Tooltip/tests/Tooltip.test.tsx

@@ -31,8 +31,8 @@ describe('<Tooltip />', () => {
     );
   });
 
-  it('renders on mouseEnter', () => {
-    wrapperComponent.simulate('mouseEnter');
+  it('renders on mouseOver', () => {
+    wrapperComponent.simulate('mouseOver');
     expect(findByTestID(tooltip, 'TooltipOverlayLabel').exists()).toBe(true);
   });