tooltip.js

const typeToCap = (type) => {
  switch (type) {
    case "PERSON":
      return "Person";
    case "CONTRIBUTION":
      return "Contribution";
    case "PRIORITY":
      return "Priority";
  }
};

export type ToolTipProps = {|
  +entity: OdysseyEntityType,
  +color: string,
|};

export class ToolTip extends React.Component<ToolTipProps> {
  render() {
    const {entity, color} = this.props;
    const type = entity.type.toLowerCase();

    const fullDescription = () => (
      <div>
        <p style={{color: "white"}}>Description: </p>
        <p style={{color: "grey"}}>{entity.description}</p>
      </div>
    );

    return (
      <div>
        <p style={{color: "white"}}>
          Type: <span style={{color: "grey"}}>{typeToCap(entity.type)}</span>
        </p>
        {entity.description.length > 0 ? fullDescription() : ""}
      </div>
    );
  }
}