73 lines
2.3 KiB
React
73 lines
2.3 KiB
React
|
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;
|