화면 너비를 초과하지 않는 툴팁 만들기 w.React

툴팁은 클릭하거나 또는 마우스를 특정 구성 요소에 가져갔을 때(hover 했을 때) 상황에 맞는 도움말이나 정보를 표시합니다.

 

툴팁을 직접 만들어서 사용하던 중, hover 요소가 화면 상 오른쪽 끝에 위치할 때 툴팁의 컨테이너가 화면 너비를 넘어가는 현상을 발견했습니다.

 

 

 

 

다음과 같은 현상은 사용자가 예상한 대로 인터페이스가 동작하지 않고, 툴팁의 내용을 확인하기 위해 화면을 스크롤해야 하기 때문에 사용자 경험을 저해합니다.

 

따라서 위와 같은 경우를 개선하여 툴팁의 컨테이너가 화면의 가로 길이를 넘어가지 않도록 툴팁의 위치를 조정해 보도록 하겠습니다.

 

 

 

 

우선 수정 전 툴팁 코드는 다음과 같습니다.

import styles from './tooltip.module.css';
import IconQna from '../../assets/icon_qna.svg';

interface Props {
  title?: string;
  message: string[];
}

export const Tooltip = ({ message, title }: Props) => {
  return (
    <div className={styles.tooltip}>
      <img className={styles['icon']} src={IconQna} alt='tooltip icon' width={16} height={16} />
      <div className={styles['tooltip']}>
        {title && <p className={styles['header']}>{title}</p>}
        {message.map((message, index) => (
          <p className={styles['body']} key={index}>
            • {message}
          </p>
        ))}
      </div>
    </div>
  );
};

 

화면 가로 길이를 넘어가지 않는 툴팁을 위해 (1) window.innerWidth와 (2) MouseEvent의 clientX 또는 getBoundingClientRect 메서드, (3) 그리고 툴팁 컨테이너의 너비 속성을 활용할 수 있습니다.

 

 

 

 

다음 그림은 window의 outerHeight와 innerHeight 속성을, 그리고 outerWidth와 innerWidth 속성을 비교한 그림입니다.

 

화면의 가로 길이를 넘어가지 않는 툴팁을 만들기 위해 window.innerWidth를 사용할 수 있습니다.

 

 

 

 

 

우선 MouseEvent의 clientX 속성을 사용하여 구현해 보도록 하겠습니다.

참고로 clientX는 브라우저 페이지를 기준으로 특정 지점의 x 좌표를 표시해 줍니다.

 

 

import styles from './tooltip.module.css';
import IconQna from '../../assets/icon_qna.svg';
import { useEffect, useRef, useState } from 'react';

interface Props {
  title?: string;
  message: string[];
}

export const Tooltip = ({ message, title }: Props) => {
  const [screenWidth, setScreenWidth] = useState(0);
  const [clientX, setClientX] = useState(0);
  const [leftX, setLeftX] = useState(0);
  const tooltipRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setScreenWidth(window.innerWidth);
  }, []);

  useEffect(() => {
    const tooltipWidth = tooltipRef.current?.clientWidth || 0;

    if (clientX + tooltipWidth > screenWidth) {
      setLeftX(clientX + tooltipWidth - screenWidth);
    } else {
      setLeftX(0);
    }
  }, [clientX, screenWidth]);

  return (
    <div className={styles.tooltip} onMouseOver={(e) => setClientX(e.clientX)}>
      <img className={styles['icon']} src={IconQna} alt='qna' width={16} height={16} />
      <div style={{ left: leftX > 0 ? `-${leftX}px` : '0' }} className={styles['tooltip']} ref={tooltipRef}>
        {title && <p className={styles['header']}>{title}</p>}
        {message.map((message, index) => (
          <p className={styles['body']} key={index}>
            • {message}
          </p>
        ))}
      </div>
    </div>
  );
};

 

 

 

 

툴팁의 컴포넌트가 화면의 너비를 초과할 경우를 나타낸 그림은 다음과 같습니다.

 

clientX와 tooltipWidth의 합에서 window.innerWidth를 뺀 leftX만큼 툴팁의 위치를 왼쪽으로 이동해 주면

다음과 같이 툴팁이 화면 가로 길이를 넘어가지 않게 배치할 수 있습니다.

 

 

 

 

 

 

 

그런데 MouseEvent의 clientX를 사용할 경우 다음과 같은 문제가 생깁니다.

 

 

마우스가 툴팁 요소를 호버했을 찰나의 clientX를 사용하기 때문에, 툴팁 컨테이너가 표시될 때마다 clientX가 조금씩 달라져 툴팁 컨테이너의 위치가 변할 수 있다는 점입니다.

 

 

 

이 문제를 해결하기 위해 getBoundingClientRect 메서드를 사용합니다.

getBoundingClientRect 메서드는 요소의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.

 

 

 

offsetLeft 속성을 사용하여 요소의 x 좌표를 구할 수도 있습니다.

하지만 offsetLeft는 offsetParent에 의존하는 값입니다.

offsetParent가 body일 경우에는 원하는 대로 동작하지만, offsetParent는 postion: static이 아닌 상위 노드를 가리키기 때문에 offsetParent가 body가 아니라면 툴팁 컨테이너를 브라우저의 innerWidth 내에 위치시키지 못할 수도 있습니다.

빨간 테두리로 표시한 요소가 offsetParent를 가리키며, 상위 요소의 position 속성에 따라 달라질 수 있다.

 

 

 

 

getBoundingClientRect 메서드가 반환한 DOMRect 객체의 x나 left 속성을 사용하면 마우스의 위치에 상관없이 요소에 대한 값을 사용하게 되므로 툴팁 컨테이너의 위치를 고정시킬 수 있습니다.

 

 

 

export const Tooltip = ({ message, title }: Props) => {

  // 생략, 위 코드와 동일

  return (
    <div className={styles.tooltip} onMouseOver={(e) => setOffsetX(e.currentTarget.getBoundingClientRect().left)}>
      // 생략
    </div>
  );
};

 

수정한 코드는 간단합니다.

setOffsetX(e.clientX) 대신 setOffsetX(e.currentTarget.getBoundingClientRect().left)로 호버하는 요소의 상대 위치를 사용하면 됩니다.

 

 

 

 

다음과 같이 화면의 너비를 벗어나지 않는 툴팁을 사용할 수 있게 되었습니다.

 

 

 

 

전체 코드는 다음 링크에서 확인할 수 있습니다.

https://github.com/ttaerrim/screen-limit-tooltip

GitHub - ttaerrim/screen-limit-tooltip: 화면을 벗어나지 않는 툴팁 만들기