JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>

<body>
  <div id="container"></div>
  <div id="logdiv"></div>
</body>

Babel + JSX

function log(txt) {
	const logdiv = document.getElementById('logdiv');
  if (txt) {
  	logdiv.innerHTML += txt + '<br/>';
  } else {
  	logdiv.innerHTML = '';
  }
} 
function logMouseEnter() { log("enter") }
function logMouseLeave() { log("&nbsp;&nbsp;&nbsp;leave") }
function logNativeMouseLeave() { log('NATIVE:mouseleave') }
function clearLog() { log() }

var ToolTipOverDisabledButton = React.createClass({
  getInitialState() {
      return { disabled: false };
  },
  toggleDisabled() {
      clearLog();
      this.setState({
        disabled: !this.state.disabled
      });
  },
  render() {
      return (
        	<button
          	disabled={this.state.disabled}
            onClick={this.toggleDisabled}
            onMouseEnter={logMouseEnter}
            onMouseLeave={logMouseLeave}
	        	ref={(e) => {
			        this.hoverElement = e;
    		    }}
          >
          	{this.state.disabled ? 'mouse leave is broken' : 'hover over me, then click to reproduce mouse leave bug'}
          </button>
      );
  },
  
  // Fix
  
  componentDidMount() {
		this.watchForNativeMouseLeave();
	},
	componentDidUpdate() {
		this.watchForNativeMouseLeave();
	},
  // onMouseLeave doesn't work on disabled elements.
	// https://github.com/facebook/react/issues/4251
	watchForNativeMouseLeave() {
    this.hoverElement.addEventListener('mouseleave', () => {
        if (this.state.disabled) {
            log('NATIVE:mouseleave');
        }
    });
	},
  handleMouseOut() {
    logNativeMouseLeave();
  }
});

ReactDOM.render(
  <ToolTipOverDisabledButton />,
  document.getElementById('container')
);