[React] 리액트 툴팁 (Tooltip) 구현하기 / 외부영역 클릭 시 툴팁 숨기는 방법

Intro

안녕하세요. 이번시간에는 리액트에서 툴팁을 구현하는 방법, 툴팁 외부 영역 클릭 시 툴팁을 숨기는 방법에 대해 알아보겠습니다. 

 

 

Let's look at detail

아래와 같은 부모 컴포넌트가 있다고 가정해봅시다. 3개의 툴팁 컴포넌트가 있고, 툴팁 컴포넌트에는 각기 다른 툴팁 설명을 props로 전달하고 있습니다. 

const SomeComponent: NextPage<Props> = props => {
  return (
       <article>
            <dl>
                <dt>
                    뉴스
                    <Tooltip desc={'뉴스 관련 툴팁입니다.'} />
                </dt>
                <dt>
                    쇼핑
                    <Tooltip desc={'쇼핑 관련 툴팁입니다.'} />
                </dt>
                <dt>
                    지도
                    <Tooltip desc={'지도 관련 툴팁입니다. '} />
                </dt>
            </dl>
        </article>
  );
}

export default SomeComponent;

 

툴팁 컴포넌트는 아래와 같습니다. 하지만 현재 구현되어 있는 툴팁 컴포넌트는 문제가 있었습니다, 선택된 툴팁이 있을 때 다른 툴팁이 선택되어도, 동시에 툴팁 desc가 표출됩니다. 또한 외부 영역을 클릭 할때 여전히 툴팁이 남아 있었습니다. 

const Tooltip: NextPage<Props> = props => {
    const [tooltip, setTooltip] = useState(false),
        tooltipRef: any = useRef<HTMLDivElement>(null),
        [offsetTop, setOffsetTop] = useState(0);

    useEffect(() => {
        const tooltipOffsetTop = tooltipRef?.current?.offsetTop + 30;
        setOffsetTop(tooltipOffsetTop);
    }, []);

    return (
        <span className={styles.tooltip} ref={tooltipRef}>
            <button type="button" className={tooltip ? styles.active : ''} onClick={() => setTooltip(!tooltip)}>
                ✔️
            </button>
            {tooltip && (
                <div style={{top: offsetTop}} onClick={() => setTooltip(false)}>
                    {props.desc}
                </div>
            )}
        </span>
    );
};

export default Tooltip;

 

 

How to solve the problem

해당 문제를 해결하기 위해 저는 handleOutsideClick 이라는 함수를 만들었습니다. 이 함수는 mousedown 이벤트를 수신하고, 선택된 툴팁 영역 외부를 클릭할 때 선택된 툴팁을 해제하는 역할을 합니다. 

 

또한 useEffect hooks를 사용하여 컴포넌트가 mount되거나, tooltipRef값이 변경될 때마다 on / off 가 됩니다. 따라서 해당 코드를 통해 선택된 툴팁이 있을 때 다른 툴팁을 선택 시 선택된 툴팁으로 해제되는 효과를 얻을 수 있습니다. 

const Tooltip: NextPage<Props> = props => {
    const [tooltip, setTooltip] = useState(false),
        tooltipRef: any = useRef<HTMLDivElement>(null),
        [offsetTop, setOffsetTop] = useState(0);

    const toggleTooltip = () => {
        setTooltip(!tooltip);
    };

    useEffect(() => {
        const tooltipOffsetTop = tooltipRef?.current?.offsetTop + 30;
        setOffsetTop(tooltipOffsetTop);
    }, []);

    useEffect(() => {
        const handleOutsideClick = (event: MouseEvent) => {
            if (tooltipRef.current && !tooltipRef.current.contains(event.target as Node)) {
                setTooltip(false);
            }
        };

        document.addEventListener('mousedown', handleOutsideClick);
        return () => {
            document.removeEventListener('mousedown', handleOutsideClick);
        };
    }, [tooltipRef]);

    return (
        <span className={styles.tooltip} ref={tooltipRef}>
            <button type="button" className={tooltip ? styles.active : ''} onClick={toggleTooltip}>
                ✔️
            </button>
            {tooltip && (
                <div style={{top: offsetTop}}>
                    {props.description}
                </div>
            )}
        </span>
    );
};

export default Tooltip;

 

---

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event