맥락적 도움말

컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다.

컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다.

사용 지침

라벨만으로 의미가 부족한 폼 항목에 사용하고, 키보드·터치 모두에서 열 수 있도록 트리거의 포커스/탭 인터랙션을 명확히 설계합니다.

예제

Default

도움말 라벨

examples/contextual-help/ContextualHelpDefault.tsx
import { ContextualHelp, ContextualHelpLabel, ContextualHelpTitle } from "@/components/ui/dynamic/contextual-help"

export default function ContextualHelpDefault() {

List

예시이미지(top left)

예시이미지(top center)

예시이미지(top right)

예시이미지(bottom left)

예시이미지(bottom center)

예시이미지(bottom right)

examples/contextual-help/ContextualHelpList.tsx
"use client"

import { ChevronRight } from "lucide-react"

속성

이름타입기본값설명
alignmentenumleftHorizontal anchor alignment of the popover.
children필수ReactNode—Popover body content. Compose ContextualHelpTitle as first child for a heading.
classNamestring—Class applied to the outer wrapper.
defaultOpenboolean—Uncontrolled initial open state.
onOpenChange((open: boolean) => void)—Called when open state changes.
openboolean—Controlled open state.
positionenumtopVertical position of the popover relative to the trigger.