JSFiddle - React, Tailwind, and code Playground

by Andrey Kogut

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>

CSS

button[disabled] {
  pointer-events: none;
}

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 clearLog() { log() }

var ToolTipOverDisabledButton = React.createClass({
  getInitialState() {
      return { disabled: false };
  },
  toggleDisabled() {
      clearLog();
      this.setState({
        disabled: !this.state.disabled
      });
  },
  render() {
      return (
      	<div onMouseEnter={logMouseEnter} onMouseLeave={logMouseLeave}>
        	<button disabled={this.state.disabled} onClick={this.toggleDisabled}>{this.state.disabled ? 'mouse leave is broken' : 'hover over me, then click to reproduce mouse leave bug'}</button>
        </div>
      );
  }
});

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