Infotip.js

Usage:

<React.Fragment>
  <p>Mouseover for more information</p>
  <Infotip title="This is the Infotip title" />
</React.Fragment>

Code:

export function Infotip(props) {
  return (
    <div className={styles.tip}>
      <i
        className={cx(styles.tipIcon, "fa fa-question-circle")}
        aria-hidden="true"
      />
      <p className={styles.tipText}>
        {props.children}
        {props.title}
      </p>
    </div>
  );
}