Tooltip
Tooltip (툴팁)
사용자가 어떤 요소에 마우스를 올렸을 때 추가 정보를 표시하는 컴포넌트예요. 아이콘의 의미를 설명할 때 유용해요.
출처: 문서
본문
Tooltip은 사용자가 요소를 호버했을 때 추가 정보를 보여 주는 컴포넌트예요. <ExampleTabs name="tooltip-basic" />
설정 (Setup)
사용하기 쉽도록 Tooltip 컴포넌트의 닫힌(closed) 컴포넌트 구성을 만들 수 있어요. 또는 다음 명령으로 프로젝트에 추가할 수도 있어요.
npx @chakra-ui/cli snippet add tooltip
사용법 (Usage)
import { Tooltip } from "@/components/ui/tooltip"
<Tooltip content="...">
<button />
</Tooltip>
예시 (Examples)
화살표 (Arrow)
showArrow prop으로 툴팁에 화살표를 표시할 수 있어요.
위치 (Placement)
positioning.placement prop으로 툴팁의 위치를 바꿀 수 있어요.
오프셋 (Offset)
positioning.offset prop으로 툴팁의 오프셋을 바꿀 수 있어요.
지연 (Delay)
openDelay와 closeDelay prop으로 툴팁의 지연을 바꿀 수 있어요.
커스텀 배경 (Custom Background)
--tooltip-bg CSS 변수로 툴팁의 배경색을 바꿀 수 있어요.
제어 (Controlled)
open과 onOpenChange prop으로 툴팁의 표시 여부를 제어할 수 있어요.
스토어 (Store)
툴팁을 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useTooltip 스토어 훅을 사용하는 거예요. 이렇게 하면 툴팁 바깥에서도 상태와 메서드에 접근할 수 있어요.
인터랙티브 (Interactive)
interactive prop으로 툴팁 콘텐츠와 상호작용하는 동안 툴팁을 열린 상태로 유지할 수 있어요.
비활성화 (Disabled)
disabled prop으로 툴팁을 비활성화할 수 있어요. 비활성화되면 툴팁이 표시되지 않아요.
아바타와 함께 (With Avatar)
Tooltip 컴포넌트를 Avatar 컴포넌트와 함께 사용하는 예시예요.
체크박스와 함께 (With Checkbox)
Tooltip 컴포넌트를 Checkbox 컴포넌트와 함께 사용하는 예시예요.
MenuItem과 함께 (With MenuItem)
Tooltip을 MenuItem 컴포넌트와 함께 사용하는 예시예요.
MenuTrigger와 함께 (With MenuTrigger)
Tooltip을 MenuTrigger 컴포넌트와 함께 사용하는 예시예요.
Switch와 함께 (With Switch)
Switch 컴포넌트를 Tooltip으로 감싸는 예시예요.
Tabs와 함께 (With Tabs)
Tabs 컴포넌트를 Tooltip으로 감싸는 예시예요.
Props
Tooltip 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.