React MDL Tooltip Example

React and MDL tooltip example for using react's rootNodeID auto generated by react

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#firstDiv {
  float: left;
}

#secondDiv {
  float: left;
}

#thirdDiv {
  float: left;
}

#firstGroup {
  display: inline-block;
}

#firstDiv2 {
  float: left;
}

#secondDiv2 {
  float: left;
}

#thirdDiv2 {
  float: left;
}

#secondGroup {
  transform: translate(0px, 0px);
}

JavaScript 1.7

var Button = React.createClass({
  componentDidMount: function (){
  	// Set MDL Events Fix
    ReactDOM.findDOMNode(this).onclick = this.props.onClick.bind(this)
  },
	render: function (){
  	return(
    	<button 
      	id={this._reactInternalInstance._rootNodeID}>
      	{this.props.children}
        {/*tooltip */}
        <div 
          htmlFor={this._reactInternalInstance._rootNodeID}
          className="mdl-tooltip mdl-tooltip--large">
          {this.props.children}
        </div>
      </button>
    )
  }
});

var App = React.createClass({
	componentDidMount: function (){
		window
    	.componentHandler
    	.upgradeDom(ReactDOM.findDOMNode(this))
	},
  
  // Update MDL on Update
  componentDidUpdate: function (){
    window
    	.componentHandler
    	.upgradeDom(ReactDOM.findDOMNode(this))
  },
  
  // Remove MDL on Unmount
  componentWillUnmount: function (){
  	window
  		.componentHandler
    	.downgradeElements(ReactDOM.findDOMNode(this))
  },
  
  _onClick: function (e) {
  	alert(e.target.innerText);
		console.log(this)
  },
  
  render: function (){
    return (
    	<div>
				<h1>React + MDL Tooltip Button Example</h1>
        <hr/>	
        <div id='firstGroup'>
          <div id='firstDiv'>
            <Button onClick={this._onClick}>1st Button</Button><br/>
          </div>
          <div id='secondDiv'>
            <Button onClick={this._onClick}>2nd Button</Button><br/>
          </div>
          <div id='thirdDiv'>
            <Button onClick={this._onClick}>3rd Button</Button>
          </div>
        </div>
        <div id='secondGroup'>
          <div id='firstDiv2'>
            <Button onClick={this._onClick}>1st Button</Button><br/>
          </div>
          <div id='secondDiv2'>
            <Button onClick={this._onClick}>2nd Button</Button><br/>
          </div>
          <div id='thirdDiv2'>
            <Button onClick={this._onClick}>3rd Button</Button>
          </div>
        </div>
      </div>
    )
  }
});

// Render in...