프로젝트 기획으로 각 CSS 속성마다 있는 물음표에 마우스를 올리면 툴팁 컴포넌트가 렌더링되어야 했습니다.
문제는 각 css 속성마다 있는 물음표의 위치가 전부 달랐습니다. 위치가 고정되어 있지않아서 직접 구해야했습니다.
처음에는 mouseEnter 이벤트 발생 시 해당 이벤트 객체의 clientX, clientY 속성을 통해 좌표를 구하고 해당 좌표를 tooltip 컴포넌트의 top, left로 설정하여 위치를 결정했습니다. 하지만 이 방식은 2가지 문제점이 있었습니다.
첫 번째 문제로는 물음표 아이콘에 마우스를 올리는 위치가 조금 달라지만 툴팁의 위치가 계속 달라지는 문제가 있었습니다. 같은 컴포넌트여도 위치가 미세하게 달라지는 것은 사용자 입장에서 불편할 수 있기에 해당 문제를 개선하고자 했습니다.
저는 이 문제를 clientX, clientY가 아닌 HTML요소의 크기와 현재 뷰포트에서의 요소의 상대적인 위치를 반환하는 getBoundingClientRect() 메서드를 통해 해결할 수 있었습니다.
clientX, clientY 와 다르게 event.currentTarget.getBoundingClientRect() 메서드는 해당 이벤트가 발생한 요소의 위치 정보를 반환하여 마우스 커서의 위치가 조금씩 달라도 고정된 좌표값을 얻을 수 있었습니다.
두 번째 문제는 툴팁 컴포넌트가 화면을 벗어나는 경우가 있었습니다.
이런식으로 툴팁이 브라우저를 벗어나게 된다면 사용자는 툴팁을 보려고 스크롤을 하거나 스크롤이 불가능한 경우는 툴팁의 일부분만 확인할 수 있었습니다.
이를 해결하고자 저는 브라우저 내부를 높이를 알 수 있는 window.innerHeight 와 getBoundingRect().y + 툴팁 컴포넌트의 높이를 비교하여 브라우저를 벗어나는 지에 대한 여부를 판단하였습니다.
툴팁 컴포넌트의 높이는 useRef를 통해 구할 수 있었습니다.
만약 getBoundingRect().y + 툴팁 컴포넌트의 높이 > window.innerHeight 를 만족한다면 툴팁의 높이만큼 위치를 조정하여 다음과 같이 툴팁 컴포넌트의 위치를 결정하였습니다.
top : getBoundingRect().y - 툴팁의 높이
근데 useRef 사용 시 문제가 있었습니다.