import React, { useState, ReactElement } from 'react';
import './Tooltip.scss';

interface Props {
  onHovered: JSX.Element;
}

export const Tooltip = (props: Props): ReactElement<HTMLDivElement> => {
  const [isHovering, setHovered] = useState(false);

  return (
    <div
      className="display-tooltip"
      onMouseEnter={(): void => setHovered(true)}
      onMouseLeave={(): void => setHovered(false)}
    >
      <i className="mo-display-icon-question" />
      {isHovering && props.onHovered}
    </div>
  );
};