Toggle Tip

Toggle Tip (토글 팁)

툴팁처럼 보이지만 팝오버처럼 동작하는 컴포넌트예요. 클릭하면 열리고 닫히는 정보 힌트를 보여줄 때 유용해요.

출처: 문서

ToggleTip은 툴팁처럼 보이지만 팝오버처럼 동작하는 컴포넌트예요. <ExampleTabs name="toggle-tip-basic" />

사용하기 쉽도록 ToggleTip 컴포넌트의 닫힌(closed) 컴포넌트 구성을 만들 수 있어요. 또는 다음 명령으로 프로젝트에 추가할 수도 있어요.

npx @chakra-ui/cli snippet add toggle-tip

이 스니펫은 Popover 컴포넌트의 닫힌 컴포넌트 구성을 포함해요.

import { InfoTip, ToggleTip } from "@/components/ui/toggle-tip"

<ToggleTip content="...">
  <button />
</ToggleTip>

InfoTip 컴포넌트로 정보 팁을 표시할 수 있어요. 이 컴포넌트는 기본적으로 정보 아이콘이 있는 아이콘 버튼을 렌더링해요.

랜딩 페이지에서 특정 기능에 대한 추가 정보를 표시할 때 유용해요.

토글 팁은 xs, sm, md, lg 크기 변형을 지원해요. 컴포넌트와 버튼 양쪽에 size prop을 넘기면 일관되게 크기가 조절돼요.

showArrow을 설정하면 팝오버 콘텐츠에서 트리거 요소를 가리키는 방향 화살표를 표시해요.

기본적으로(true) Escape 키를 누르면 토글 팁이 닫혀요. false로 설정하면 Escape를 눌러도 열린 상태를 유지해요.

기본적으로(true) 토글 팁 바깥을 클릭하면 닫혀요. false로 설정하면 닫지 않고 외부 상호작용을 허용해요.

Popover 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.