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>

JavaScript 1.7

var Button = React.createClass({
	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))
  },
  
  render: function (){
    return (
    	<div>
				App
        <hr/>
				<Button>Poop</Button><br/>
        <Button>More Poop</Button>
      </div>
    )
  }
});

// Render in Dom
ReactDOM.render(
  <App />,
  document.getElementById('container')
);