Foresitory 🌳 Foresitory 🌳

툴팁

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

  TECH 2024. 4. 28. 21:08

  툴팁은 클릭하거나 또는 마우스를 특정 구성 요소에 가져갔을 때(hover 했을 때) 상황에 맞는 도움말이나 정보를 표시합니다. 툴팁을 직접 만들어서 사용하던 중, hover 요소가 화면 상 오른쪽 끝에 위치할 때 툴팁의 컨테이너가 화면 너비를 넘어가는 현상을 발견했습니다.    다음과 같은 현상은 사용자가 예상한 대로 인터페이스가 동작하지 않고, 툴팁의 내용을 확인하기 위해 화면을 스크롤해야 하기 때문에 사용자 경험을 저해합니다. 따라서 위와 같은 경우를 개선하여 툴팁의 컨테이너가 화면의 가로 길이를 넘어가지 않도록 툴팁의 위치를 조정해 보도록 하겠습니다.    우선 수정 전 툴팁 코드는 다음과 같습니다.import styles from './tooltip.module.css';import IconQna..

  Read More