Tooltip
hover 및 focus 가능한 trigger를 위한 짧고 비상호작용적인 설명이에요.
핵심 속성
Provider는 관련 trigger group 전체의 열기·닫기 지연을 조정해요.
Root는 defaultOpen 또는 제어형 open/onOpenChange 상태를 지원하고
Positioner는 side, alignment, offset, collision 처리를 담당해요. popup content는
보조적이고 비상호작용적이어야 하며 action은 TRPopover나 TRDialog에 배치하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/tooltip.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRTooltip } from '@tinyrack/ui/components/tooltip';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
접근 가능한 아이콘 설명 고유 링크
icon button은 tooltip content에 의존하지 않고 accessible name을 유지해요. 이 문서 preview는 inverse surface와 arrow가 보이도록 열린 상태로 시작해요.
예시
배치 방향 고유 링크
각 trigger를 hover하거나 focus해 요청한 방향을 비교하세요. 선호 방향의 공간이 부족하면 collision 회피가 tooltip을 반대쪽으로 바꿀 수 있어요.
collision에 안전한 긴 콘텐츠 고유 링크
default-open surface가 긴 운영 문구를 줄바꿈하고 right-side 선호 위치가 맞지 않을 때 사용 가능한 viewport 너비를 사용해요.
Provider 지연 group 고유 링크
status control을 순서대로 hover하거나 focus하세요. Provider가 group에 500ms initial delay와 여유 있는 100ms close delay를 적용해요.
공유 handle과 viewport 고유 링크
분리된 trigger가 payload-aware Root 하나를 공유해요. active trigger의 content가 바뀔 때 Viewport가 transition container를 제공해요.
API
Base UI가 hover/focus timing, accessible description 연결, portal positioning,
collision 처리와 Escape 닫기를 담당해요. 모든 compound part와 prop/state type은
@tinyrack/ui/components/tooltip에서 export되며 대응하는 CSS는 opt-in이에요.
icon-only trigger에는 자체 aria-label을 제공하고, 터치 사용자는 content를
hover할 수 없으므로 tooltip만을 필수 정보의 유일한 출처로 삼지 마세요.
Provider는 delay group을 조정하고 Root는 state를 소유해요. Trigger는
mouse hover나 keyboard focus로 열려요. Portal은 portal container를 정하고,
Positioner는 배치와 collision을 처리해요. Popup은 role="tooltip"인
accessible description이며 Arrow는 trigger를 가리켜요. Viewport는 여러
trigger가 공유하는 content를 전환해요. createHandle은 분리된 trigger를
payload-aware root에 연결해요. Escape는 focus를 옮기지 않고 닫으며 touch
press는 tooltip을 열지 않아요.