<commit_before>import React, {Component, PropTypes} from 'react';

const STYLE = {
  width: "30px",
  height: "30px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  marginBottom: "5px",
  fontSize: "25px"
};


export default class ToolbarButton extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {active: false};
  }

  render() {
    let {state, props} = this;
    let color = props.active || state.active ? '#1CA6FC' : '#C2C2C2';

    return (
      <div style={STYLE}
           onMouseEnter={event => this.setState({active: true})}
           onMouseLeave={event => this.setState({active: false})}>

        <a href="javascript:;" style={{color, textDecoration: "none"}} onClick={props.onClick} title={props.tooltip}>
          {props.children}
        </a>
      </div>
    )
  }
}

ToolbarButton.propTypes = {
  active: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  tooltip: PropTypes.string.isRequired
}<commit_msg>add toolbar tooltip support<commit_after>import React, {Component, PropTypes} from 'react';

//http://www.cssportal.com/css-tooltip-generator/

const STYLE = {
  width: "30px",
  height: "30px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  marginBottom: "5px",
  fontSize: "25px",
  position: "relative",
};

const STYLE_TOOLTIP = {
  position: "absolute",
  width: "140px",
  color: "#FFFFFF",
  background: "#000000",
  height: "30px",
  lineHeight: "30px",
  textAlign: "center",
  visibility: "visible",
  borderRadius: "6px",
  opacity: "0.8",
  left: "100%",
  top: "50%",
  marginTop: "-15px",
  marginLeft: "15px",
  zIndex: "999",
  fontSize: "12px",
};

const STYLE_TOOLTIP_PIN = {
  position: "absolute",
  top: "50%",
  right: "100%",
  marginTop: "-8px",
  width: "0",
  height: "0",
  borderRight: "8px solid #000000",
  borderTop: "8px solid transparent",
  borderBottom: "8px solid transparent"
};

export default class ToolbarButton extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {active: false};
  }

  render() {
    let {state, props} = this;
    let color = props.active || state.active ? '#1CA6FC' : '#C2C2C2';

    return (
      <div style={STYLE}
           onMouseEnter={event => this.setState({active: true})}
           onMouseLeave={event => this.setState({active: false})}>

        <a href="javascript:;" style={{color, textDecoration: "none"}} onClick={props.onClick}>
          {props.children}
        </a>

        {state.active ?
          <div style={STYLE_TOOLTIP}>
            <span style={STYLE_TOOLTIP_PIN}/>
            {props.tooltip}
          </div>
          : null
        }

      </div>
    )
  }
}

ToolbarButton.propTypes = {
  active: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  tooltip: PropTypes.string.isRequired
};
{'fraction_non_alphanumeric': 0.16216216216216217, 'fraction_numerical': 0.0246015246015246, 'mean_word_length': 3.2145985401459853, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4657424', 'n_tokens_mistral': 1015, 'n_tokens_neox': 977, 'n_words': 217}