reacttooltip

var Word = React.createClass({
  callback: function(e) {
      e.preventDefault();
      this.props.formCB(this.props.id, this.state.value);
  },
  getInitialState: function() {
    return {value: ""};
  },
    handleChange: function(e) {
      this.setState({value: e.target.value});
  },
  render: function() {
    let style;
    let tooltip;
    let pointer = {pointerEvents: "auto"};
    if(this.props.id === this.props.hilight.toString()){
        style = {color: "magenta"};
        if(this.props.tooltip){
            tooltip = <ReactTooltip class="whatever" id={this.props.id} place="top" effect="solid"> <form onSubmit={this.callback}><input id="text_box" type="text" value={this.state.value} onChange={this.handleChange} /></form> </ReactTooltip>; 
            ReactTooltip.show(this.refs.foo);
        }
    } else {
        style = {color: "black"};
    }
    let inline = {display: "inline"};
    return (
     <div style={inline}>
      <a style={style} id={this.props.id} ref='foo' data-tip data-event="custom" data-for={this.props.id}>
        {this.props.text} { " " }
      </a>
      {tooltip}
      </div>
    );
  }
});