Tooltip UI

[not-using]

목표

tooltip ui를 위한 컴포넌트 개발

필요성

처음 도입되는 기능 혹은 새로운 개념에 대한 추가 설명이 필요한 경우가 있습니다.
한번 숙지하면 계속 확인할 필요는 없어서 특정 상황에서만 드러나는 UI 로 설명을 숨겨두려 합니다!

tooltip UI 웹 접근성 관련 mdn 설명

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

[not-using]

UI library 분석

chakra-ui tooltip

• 작동방식 유추

  • 아이콘, 간단한 라벨등을 Tooltip 컴포넌트로 감쌈
  • 예시 hover 시 별도의 chakra-portal div가 반응함

• 참고할만한 사항

  • 예시 코드 속 aria-label
  • 개발자도구로 확인한 aria-describedby
    

material UI tooltip

• 작동방식 유추

  • 마찬가지로 Tooltip 컴포넌트로 감쌈
  • 예시 hover시 body에 새로운 div 추가됨

• 참고할만한 사항

  • 개발자도구로 확인한 role
    

Ant design tooltip

• 작동방식 유추

  • 마찬가지로 Tooltip 컴포넌트로 감쌈
  • className 수정됨 ant-tooltip-hidden 이 없어지면서 보이는 듯
    

• 참고할만한 사항

  • 위치 지정 가능
    
    

semantic UI

• 작동방식 유추
  • children이 아닌 trigger로 컴포넌트 합성
  • 예시 hover시 body 아래에 새로운 div 추가됨
    

Blueprint tooltip2

• 참고할만한 사항
  • 마우스 커서가 물음표로 변함

[not-using]

고려사항

tooltip의 위치

• UI 라이브러리마다 툴팁 위치가 조금씩 다름 -> 표준은 없음
• 대상 컴포넌트에서 x,y 위치 확인 후 툴팁 컴포넌트 생성시 지정하는 방식이 좋을 듯
• ant design 처럼 위치 지정이 가능하면 매우 좋을 듯
  • 기본값: top

tooltip의 크기

• 짧은 글은 width 설정없이 최대 width만 있는 게 일반적
  • chakra ui
    
  • material ui
    

hover 대상의 위치 크기 구하기

• useRef로 DOM element 에 직접 접근해야
• 커스텀 훅으로 따로 분리, 추후 재사용에 대비하면 좋을 듯

[not-using]

Element 위치정보 확인하는 방법

offsetLeft, offsetWidth

부모기준 offset으로 적절치 않음

getBoundingClientRect

뷰포트 기준으로 위치와 크기 정보 반환
현재 스크롤위치와 함께 최상단에서의 위치 및 크기 정보를 확인할 수 있음