테이블 셀에 호버 효과로 상세 정보 표시 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular 애플리케이션 개발자, CSS/HTML 기초 지식 보유자

핵심 요약

• CSS를 활용한 툴팁 구현 : position: relative와 .tooltip 클래스를 사용하여 테이블 셀()에 호버 시 상세 정보 표시
• 호버 효과 동작 원리 : td:hover .tooltip { display: block; }로 툴팁 노출 조건 설정
• UI/UX 최적화 : z-index, transform: translateX(-50%)으로 툴팁 정렬 및 겹침 방지

섹션별 세부 요약

1. HTML 구조 정의

• {{item.name}} 형식으로 테이블 셀 구성
• {{item.details}}는 호버 시 노출할 정보를 저장한 데이터 속성

2. CSS 스타일링 적용

• 툴팁 기본 설정
• .tooltip { display: none; position: absolute; }로 초기 상태 설정
• background: rgba(0, 0, 0, 0.7);으로 반투명 배경 적용
• 위치 조정
• top: 100%; left: 50%; transform: translateX(-50%)으로 툴팁 중앙 정렬
• z-index: 10으로 레이어 순서 지정

3. 호버 효과 동작

• td:hover .tooltip { display: block; }로 마우스 호버 시 툴팁 노출
• white-space: nowrap으로 텍스트 줄바꿈 방지

결론

• 실무 팁 : media query로 반응형 디자인 적용, box-shadow/transition 속성 추가로 애니메이션 효과 구현
• 최적화 방향 : 복잡한 상호작용은 Tippy.js 등 라이브러리 활용 권장
• 핵심 구현법 : position: relative + .tooltip + td:hover 조합으로 간단한 툴팁 구현 가능