LogoCoUI

Tooltip

툴팁 컴포넌트

Tooltip#

요소에 호버하거나 포커스할 때 설명 텍스트를 표시하는 툴팁 컴포넌트입니다.

사용법#

// 기본 툴팁
CouiTooltip(
  message: '이 버튼을 클릭하면 저장됩니다',
  child: CouiButton(
    onPressed: handleSave,
    child: Icon(Icons.save),
  ),
)

// 위치 지정
CouiTooltip(
  message: '설정 메뉴',
  placement: TooltipPlacement.right,
  child: Icon(Icons.settings),
)

// 리치 콘텐츠 툴팁
CouiTooltip.rich(
  content: Column(
    children: [
      Text('단축키', style: TextStyle(fontWeight: FontWeight.bold)),
      Text('Ctrl + S'),
    ],
  ),
  child: Icon(Icons.keyboard),
)

Tooltip(
  message: '이 버튼을 클릭하면 저장됩니다',
  child: Button(onClick: handleSave, child: Icon(Icons.save)),
)

Tooltip(
  message: '설정 메뉴',
  placement: TooltipPlacement.right,
  child: Icon(Icons.settings),
)

Props / Parameters#

속성타입기본값설명
messageString필수툴팁 텍스트
placement TooltipPlacement top 표시 위치
delay Duration 500ms 표시 지연 시간
showArrowbooltrue화살표 표시
childWidget필수툴팁을 표시할 대상 위젯

변형 (Variants)#

위치#

CouiTooltip(message: '위', placement: TooltipPlacement.top, child: target)
CouiTooltip(message: '아래', placement: TooltipPlacement.bottom, child: target)
CouiTooltip(message: '좌', placement: TooltipPlacement.left, child: target)
CouiTooltip(message: '우', placement: TooltipPlacement.right, child: target)

지연 시간 조절#

// 즉시 표시
CouiTooltip(
  message: '즉시 표시',
  delay: Duration.zero,
  child: target,
)

// 긴 지연
CouiTooltip(
  message: '1초 후 표시',
  delay: Duration(seconds: 1),
  child: target,
)

리치 툴팁#

CouiTooltip.rich(
  content: Row(
    children: [
      Icon(Icons.info, size: 16),
      SizedBox(width: 8),
      Text('추가 정보가 있습니다'),
    ],
  ),
  child: target,
)