자바스크립트 상태(useState) 없이 순수 CSS의 :hover 선택자와 position: absolute를 활용해 마우스 호버 툴팁을 구현했다.
1. 툴팁 배치의 핵심: relative와 absolute의 관계
CSS의 position: absolute는 문서 전체를 기준으로 위치를 잡는 것이 아니라, position이 static이 아닌 가장 가까운 상위 부모 요소를 기준으로 좌표(top, bottom, left, right)를 계산한다.
- 기준 부모 태그:
position: relative지정
- 툴팁 본체 태그:
position: absolute지정
이렇게 기준점을 잡아두면 화면 해상도나 부모의 위치가 바뀌어도 툴팁이 부모 요소를 벗어나지 않고 의도한 위치에 정확히 붙어있게 된다.
2. 마우스 호버 제어 메커니즘
툴팁을 띄우기 위해 리액트 state로 isHover를 관리할 수도 있지만, 순수 UI 표시 목적이라면 CSS 자식 결합자(>)와 :hover 가상 클래스로 처리하는 편이 리렌더링이 발생하지 않아 훨씬 가볍다.
- 기본 상태: 툴팁 컴포넌트에
display: none;을 주어 화면에서 숨긴다. - 부모 호버 상태: 부모 요소에 마우스가 올라가면(
&:hover > Tooltip) 속성을display: flex;로 덮어써 화면에 노출시킨다.
3. 스타일 구현 코드 (Emotion)
import styled from "@emotion/styled";
// 1. 기준점이자 호버 이벤트를 감지할 부모 요소
export const LocationInfo = styled.span`
position: relative; // 툴팁의 기준 좌표점
display: inline-block;
// 부모에 호버했을 때 숨겨진 툴팁을 노출
&:hover > .tooltip {
display: flex;
}
`;
// 2. 호버 시 노출될 툴팁 본체
export const LocationToolTip = styled.span`
display: none; // 기본 숨김 처리
flex-direction: column;
position: absolute;
top: 0;
transform: translateY(-100%); // 부모 요소 바로 위쪽으로 띄우기
background-color: #333333;
color: #ffffff;
padding: 8px 12px;
border-radius: 4px;
z-index: 10;
// 글자 수에 맞춰 자동으로 너비 확장
& > span {
width: max-content;
}
// CSS border 트릭으로 구현한 말풍선 꼬리표 (삼각형)
& > span:last-of-type {
position: absolute;
display: block;
width: 0;
height: 0;
right: 12px;
bottom: -8px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #333333;
}
`;4. 구현 중 마주친 이슈와 해결
텍스트 줄바꿈(찌그러짐) 이슈: width: max-content
인라인 요소나 position: absolute를 적용한 요소는 부모의 일반적인 흐름에서 빠져나오기 때문에, 가로 너비가 지정되지 않으면 텍스트가 강제로 개행되며 폭이 좁아지는 현상이 발생한다.
이때 width: max-content 속성을 사용하면 텍스트가 줄바꿈되지 않고 글자의 전체 길이만큼 너비가 자동으로 확장되어 문제를 해결할 수 있다.
말풍선 꼬리표 CSS 삼각형 제작
이미지나 SVG 없이 CSS의 border 특성만으로 삼각형 꼬리표를 만들었다.
width: 0,height: 0으로 요소 자체 크기를 없앤다.
border-top에 배경색과 동일한 색상을 주고, 좌우border에transparent를 지정하면 깔끔한 역삼각형 형태가 완성된다.
position: absolute와bottom,right속성으로 툴팁의 하단 모서리에 정확히 맞물리도록 위치를 보정한다.
Developer