fromis_9/frontend-temp/src/components/common/Tooltip.jsx

import { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * 커스텀 툴팁 컴포넌트
 * 마우스 커서를 따라다니는 방식
 * @param {React.ReactNode} children - 툴팁을 표시할 요소
 * @param {string|React.ReactNode} text - 툴팁에 표시할 내용 (content prop과 호환)
 * @param {string|React.ReactNode} content - 툴팁에 표시할 내용 (text prop과 호환)
 */
function Tooltip({ children, text, content, className = '' }) {
  const [isVisible, setIsVisible] = useState(false);
  const [position, setPosition] = useState({ bottom: 0, left: 0 });
  const triggerRef = useRef(null);

  // text 또는 content prop 사용 (문자열 또는 React 노드)
  const tooltipContent = text || content;

  const handleMouseEnter = (e) => {
    // 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로)
    setPosition({
      bottom: window.innerHeight - e.clientY + 10,
      left: e.clientX,
    });
    setIsVisible(true);
  };

  const handleMouseMove = (e) => {
    // 마우스 이동 시 툴팁 위치 업데이트
    setPosition({
      bottom: window.innerHeight - e.clientY + 10,
      left: e.clientX,
    });
  };

  return (
    <>
      <div
        ref={triggerRef}
        className={`inline-flex items-center ${className}`}
        onMouseEnter={handleMouseEnter}
        onMouseMove={handleMouseMove}
        onMouseLeave={() => setIsVisible(false)}
      >
        {children}
      </div>
      {isVisible &&
        tooltipContent &&
        ReactDOM.createPortal(
          <AnimatePresence>
            <motion.div
              initial={{ opacity: 0, y: 5, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 5, scale: 0.95 }}
              transition={{ duration: 0.15 }}
              style={{
                bottom: position.bottom,
                left: position.left,
              }}
              className="fixed z-[9999] -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-xs font-medium rounded-lg shadow-xl pointer-events-none"
            >
              {tooltipContent}
            </motion.div>
          </AnimatePresence>,
          document.body
        )}
    </>
  );
}

export default Tooltip;