title: React onMouseEnter not firing in Chrome when element blocking cursor disappears
body: <p><strong>NOTE: This appears to be a Chrome only issue</strong></p>
  
  <p>React will currently not fire the <code>onMouseEnter</code> event when an element blocking the event element disappears. This is not the case with standard JS events and even delegated events.</p>
  
  <p>Here is a simplified depiction and code sample of the issue I am having; when the tooltip from the lower element disappears (and the cursor is above the upper element), the <code>onMouseEvent</code> does not fire:</p>
  
  <p><a href="https://i.stack.imgur.com/wQwkf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wQwkf.gif" alt="React onMouseEnter event does not fire when element blocking cursor disappears"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function reactMouseEnter({currentTarget}) {
    console.log('React Mouse Enter Event');
    const rect = currentTarget.getBoundingClientRect();
    const tooltip = document.createElement('div');
    tooltip.classList.add('tooltip');
    tooltip.style.top = rect.y - 30 + 'px';
    document.body.appendChild(tooltip);
  
    const mouseLeaveHandler = () =&gt; {
      currentTarget.removeEventListener('mouseleave', mouseLeaveHandler);
      setTimeout(() =&gt; {
        tooltip.parentNode.removeChild(tooltip);
      }, 300);
    };
  
    currentTarget.addEventListener('mouseleave', mouseLeaveHandler);
  }
  
  class Example extends React.Component {
    ref = React.createRef()
    componentDidMount() {
      this.ref.current.addEventListener('mouseenter', () =&gt; {
        console.log('Regular Mouse Enter Event');
      })
    }
    render() {
      return (
        &lt;div&gt;
          &lt;div onMouseEnter={ reactMouseEnter } ref={this.ref} className="box" /&gt;
          &lt;div onMouseEnter={ reactMouseEnter } className="box" /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Example /&gt; , document.getElementById('example'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    border: 1px solid black;
    height: 28px;
    margin-bottom: 10px;
    position: relative;
    width: 28px;
  }
  
  .tooltip {
    width: 30px;
    height: 30px;
    background-color: lightcoral;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="example" style="margin-top: 30px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there something I can do differently in React to get <code>onMouseEnter</code> to work? I also tried using <code>onMouseOver</code> instead, but it produces other unintended side effects in my actual implementation, so would prefer to see if this is possible with <code>onMouseEnter</code>.</p>