GitHub

Contextual Help

필드나 작업 옆에 배치해 짧은 도움말을 팝오버로 제공하는 컴포넌트입니다.

examples/krds/contextual-help-demo.tsx
import {
  ContextualHelp,
  ContextualHelpContent,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/contextual-help.json

사용법

import { ContextualHelp, ContextualHelpContent, ContextualHelpDescription, ContextualHelpHeader, ContextualHelpTitle, ContextualHelpTrigger } from "@/components/ui/contextual-help"
<ContextualHelp>
  <ContextualHelpTrigger />
  <ContextualHelpContent>
    <ContextualHelpHeader>
      <ContextualHelpTitle>신청 자격</ContextualHelpTitle>
      <ContextualHelpDescription>최근 3개월 내 발급된 증빙서류를 기준으로 확인합니다.</ContextualHelpDescription>
    </ContextualHelpHeader>
  </ContextualHelpContent>
</ContextualHelp>

KRDS 정렬

ContextualHelp는 별도 상호작용 primitive가 아니라 Popover + Button 조합입니다. 신규 구현은 shadcn Popover API를 우선 유지하고, KRDS 도움말 의미를 명확히 해야 할 때 이 alias를 사용합니다.

구성

다음 조합으로 ContextualHelp를 사용할 수 있습니다.

ContextualHelp
├── ContextualHelpTrigger
├── ContextualHelpContent
├── ContextualHelpHeader
├── ContextualHelpTitle
├── ContextualHelpDescription

예제

Basic

필드나 작업 옆에 배치해 짧은 도움말을 팝오버로 제공하는 컴포넌트입니다.

examples/krds/contextual-help-demo.tsx
import {
  ContextualHelp,
  ContextualHelpContent,

API 참조

속성타입기본값설명
labelstring"도움말 열기"트리거의 접근성 레이블
sideOffsetnumber8팝오버와 트리거 사이 간격