tooltip.js

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

import {Button} from '/component/base/Button';

export const Test = ({children, toolTip, ...props}) => {
  const [toolTipStyle, setToolTipStyle] = useState({
    display: 'none',
    top: 0,
    left: 0,
    position: 'absolute',
  });

  const ref = React.useRef(null);

  const toolTipRef = React.useRef();

  const onEnter = () => {
    const r = ref.current.getBoundingClientRect();
    const toolTipRect = toolTipRef.current.getBoundingClientRect();

    // console.log(toolTipRect);
    console.log(toolTipRef);

    const top = r.top + r.height / 2;
    const left = r.left + r.width + 36;

    setToolTipStyle({...toolTipStyle, display: 'inherit', top, left});
  };

  const onLeave = () => {
    setToolTipStyle({...toolTipStyle, display: 'none'});
  };

  return (
    <div
      role="tabpanel"
      ref={ref}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{display: 'inline-block'}}
    >
      {React.cloneElement(children, {})}

      {ReactDOM.createPortal(
        <ToolTip ref={toolTipRef} css={toolTipStyle}>
          {toolTip}
        </ToolTip>,
        document.body,
      )}
    </div>
  );
};

const ToolTip = React.forwardRef((props, ref) => {
  const {className, children} = props;

  return (
    <div ref={ref} className={className}>
      {children}
    </div>
  );
});