useTooltip

useTooltip은 Tooltip의 열림 상태를 다루는 머신입니다. 트리거에는 getTriggerProps를, 팁의 외형만 담당하는 Tooltip.Root에는 getTooltipProps를 펼치세요. 호버는 showDelay(기본 300ms)만큼 기다리고, 포커스는 바로 열며, coarse 포인터는 포커스만 씁니다. 링크가 있는 팁에는 interactive: true를 넘기세요. Tab으로 들어갈 수 있는 비모달 팁 dialog가 되며, 이때 Tooltip.Root에는 aria-label과 aria-labelledby 중 정확히 하나가 필요합니다.

오버플로 칩과 버튼이 아닌 다른 트리거는 훅을 직접 씁니다. 탭으로 갈 수 없는 감싸는 요소에는 tabIndex={0}을 붙이세요. Button.Root는 이미 자신의 레이블을 팁으로 보여 주므로, 훅이 팁을 담당할 때는 그 버튼에 tooltip={false}를 설정하세요.

const tooltip = useTooltip()

<>
  <span {...tooltip.getTriggerProps({ tabIndex: 0 })}>
    <Chip.Overflow overflowCount={2} />
  </span>
  <Tooltip.Root {...tooltip.getTooltipProps()}>Schema, Docs</Tooltip.Root>
</>

언제 쓰나요

언제: Button.Root가 아닌 트리거의 짧은 힌트, 또는 링크가 있는 팁(interactive: true).

쓰지 않을 때: 아이콘만 있거나 잘린 Button.Root → 내장 툴팁. 동작 메뉴 → Menu. 다른 앵커 패널 → usePopover. 긴 도움말 → Description.

Props