Tooltip — 아이콘 액션의 설명을 플랫폼에 맞게 전하는 Tooltip

44px 아이콘 액션을 직접 소유하고 웹 시각 tooltip·네이티브 accessibilityHint로 짧은 보조 설명을 전달하는 Expo·React Native Tooltip입니다.

v0.4.0 공개 예정

이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.

Tooltip 사용 시점과 역할

Tooltip은 content 문자열과 필수 triggerLabel·triggerIcon·onPress를 받아 이름 있는 아이콘 액션을 직접 렌더합니다. 웹에서는 hover 지연과 focus 즉시 표시, 하나의 활성 tooltip, 충돌 회피와 Escape 종료를 제공하고, 네이티브에서는 별도 floating layer 없이 같은 content를 accessibilityHint로 전달해 터치 동작을 방해하지 않습니다.

웹 pointer hover 지연·focus 즉시 표시·pointer bridge와 한 번에 하나의 활성 tooltip
12개 placement, RTL, collision shift와 scroll·blur·Escape 정리
tooltipDisabled가 설명만 끄고 이름 있는 onPress 액션은 그대로 유지

설치와 최소 예제

Tooltip: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.

TypeScript

pnpm add @gj-kit/expo-ui

import { Tooltip } from '@gj-kit/expo-ui';

<Tooltip triggerLabel="필터 도움말" triggerIcon={infoIcon} content="선택한 조건만 표시합니다." onPress={openFilters} />

접근성과 플랫폼 동작

triggerLabel은 아이콘 전용 button의 필수 이름이고 sm·md 모두 최소 44px target을 유지합니다. 웹은 tooltipDisabled가 아니면 trigger와 programmatic description의 aria-describedby 관계를 항상 유지하고 시각 bubble만 focus·hover 중 표시하며, 네이티브는 content를 accessibilityHint로 전달합니다. 기능에 꼭 필요한 정보나 상호작용은 Tooltip에만 넣어서는 안 됩니다.

기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.

함께 사용하는 컴포넌트

Tooltip — 아이콘 액션의 설명을 플랫폼에 맞게 전하는 Tooltip

Tooltip 사용 시점과 역할

설치와 최소 예제

접근성과 플랫폼 동작

함께 사용하는 컴포넌트

IconButton

Popover

Button