Tooltip in Salad Room

tooltip.jsx

import React, { useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';

import TooltipBubble from './tooltip_bubble';

export default function Tooltip({ message, children }) {
  const [showTooltip, setShowTooltip] = useState(false);
  const childRef = useRef(null);
  const child = React.Children.only(children);

  const handleMouseEnter = () => {
    child.onMouseEnter && child.onMouseEnter();
    setShowTooltip(true);
  };

  const handleMouseLeave = () => {
    child.onMouseLeave && child.onMouseLeave();
    setShowTooltip(false);
  };

  const clonedChild = React.cloneElement(child, {
    onMouseOver: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    ref: childRef
  });

  return (
    <>
      {clonedChild}
      <CSSTransition
        in={showTooltip}
        classNames="tooltip-bubble--transition"
        timeout={300}
        unmountOnExit
      >
        <TooltipBubble targetRef={childRef}>{message}</TooltipBubble>
      </CSSTransition>
    </>
  );
}