lbry-desktop/ui/js/component/tooltip.js

import React from "react";

export class ToolTip extends React.Component {
  static propTypes = {
    body: React.PropTypes.string.isRequired,
    label: React.PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);

    this.state = {
      showTooltip: false,
    };
  }

  handleClick() {
    this.setState({
      showTooltip: !this.state.showTooltip,
    });
  }

  handleTooltipMouseOut() {
    this.setState({
      showTooltip: false,
    });
  }

  render() {
    return (
      <span className={"tooltip " + (this.props.className || "")}>
        <a
          className="tooltip__link"
          onClick={() => {
            this.handleClick();
          }}
        >
          {this.props.label}
        </a>
        <div
          className={
            "tooltip__body " + (this.state.showTooltip ? "" : " hidden")
          }
          onMouseOut={() => {
            this.handleTooltipMouseOut();
          }}
        >
          {this.props.body}
        </div>
      </span>
    );
  }
}

export default ToolTip;