Tooltip

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

호버와 키보드 포커스 시 짧은 보조 설명을 표시하세요. 포커스 가능한 Trigger 하나를 감싸세요.

Base UI 1.9에서 Tooltip은 시각적 보조 레이블입니다. 접근 가능한 이름에 의존하지 마세요. 이름은 Trigger 자체에 지정하세요. 필수 설명이나 인터랙티브 요소를 넣지 마세요. 대신 페이지 콘텐츠나 Popover를 사용하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

TooltipProvider → Tooltip(label) → single focusable trigger

키보드와 접근성

Trigger에 포커스하면 Tooltip이 표시됩니다. Escape로 닫습니다. Tooltip은 절대 포커스를 받지 않습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { TooltipProvider, Tooltip, Button } from '@surflane/ui'

<TooltipProvider>
  <Tooltip label='Inspect the build logs'>
    <Button variant='outline'>Logs</Button>
  </Tooltip>
  <Tooltip label='Run the pipeline again' shortcut={['mod', 'shift', 'r']}>
    <Button variant='outline'>Rerun</Button>
  </Tooltip>
</TooltipProvider>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰