Legacy
CoreTooltip
hover 또는 click 이벤트로 보조 정보를 표시하는 툴팁 컴포넌트. Tooltip으로 마이그레이션을 권장합니다.
개요
마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는
Tooltip을 사용하세요.
CoreTooltip은 자식 요소를 트리거로 사용해 hover 또는 click 시 말풍선 형태의 보조 정보를 표시하는 컴포넌트입니다.
eventType—hover(기본),click,none(외부 제어)- 14가지
placement— 4방향 × 3정렬, 단축형(top,bottom등) 지원 autoAdjust— 뷰포트 경계 감지 후 방향·정렬 자동 보정title+text— 제목과 본문 분리 구성onClose— click 모드에서 닫기 버튼 또는 커스텀 콜백active/handleActive— 외부에서 열림 상태 직접 제어CorePortal을 통해#core-tooltip-portal에 마운트
Usage
기본 사용법 (hover)
<CoreTooltip title="타이틀" text="툴팁 텍스트입니다." eventType="hover" autoAdjust> <IconHelpOutline /> </CoreTooltip>
Placement
14가지 placement를 지원합니다. autoAdjust를 끄면 고정 위치로 표시됩니다.
<HStack $css={{ gap: '24px', flexWrap: 'wrap' }}> <CoreTooltip placement="top-start" text="top-start" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="top-center" text="top-center" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="top-end" text="top-end" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="bottom-start" text="bottom-start" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="bottom-center" text="bottom-center" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="bottom-end" text="bottom-end" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="left-center" text="left-center" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> <CoreTooltip placement="right-center" text="right-center" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> </HStack>
Click 이벤트 + 닫기 버튼
eventType="click"으로 설정하면 클릭 시 툴팁이 열립니다. onClose로 닫기 버튼을 활성화합니다.
<HStack $css={{ gap: '16px' }}> <CoreTooltip title="타이틀" text="클릭으로 열립니다." eventType="click" onClose> <IconHelpOutline /> </CoreTooltip> <CoreTooltip title="타이틀" text="클릭으로 열립니다." eventType="click" onClose={() => console.log('닫힘')}> <IconHelpOutline /> </CoreTooltip> </HStack>
자동 위치 조정 (autoAdjust)
뷰포트 경계에 근접하면 방향과 정렬을 자동으로 보정합니다.
<HStack $css={{ gap: '16px' }}> <CoreTooltip title="타이틀" text="autoAdjust 활성" eventType="hover" autoAdjust> <IconHelpOutline /> </CoreTooltip> <CoreTooltip title="타이틀" text="autoAdjust 비활성" eventType="hover" autoAdjust={false}> <IconHelpOutline /> </CoreTooltip> </HStack>
다양한 트리거 요소
children으로 아이콘, 텍스트, 컴포넌트를 모두 사용할 수 있습니다.
<HStack $css={{ gap: '16px', alignItems: 'center' }}> <CoreTooltip title="아이콘 트리거" text="아이콘에 툴팁" eventType="hover" autoAdjust> <IconHelpOutline /> </CoreTooltip> <CoreTooltip title="텍스트 트리거" text="텍스트에 툴팁" eventType="hover" autoAdjust> <span>툴팁</span> </CoreTooltip> <CoreTooltip title="태그 트리거" text="태그에 툴팁" eventType="hover" autoAdjust> <CoreTag tagType="primary" text="Tag" size="md" /> </CoreTooltip> </HStack>
비활성화
<CoreTooltip title="타이틀" text="이 툴팁은 비활성화됩니다." eventType="hover" disabled> <IconHelpOutline /> </CoreTooltip>
Props
Prop
Type
TooltipEvent
Prop
Type
Placement
Prop
Type
스타일
Tooltip Body
background-color: gray-90,color: whiteborder-radius: radius-50padding: spacing-100 (4px) spacing-250 (10px)typography: body[1],max-width: 400px
Tail (화살표)
border-width: 4px,border-color: gray-90(나머지 방향 transparent)- 방향별 위치:
top→bottom: -8px,bottom→top: -8px,left→right: -8px,right→left: -8px
마이그레이션 가이드
CoreTooltip에서 Tooltip으로 이전하세요.
// Before
<CoreTooltip
title="타이틀"
text="툴팁 내용"
eventType="hover"
placement="top-center"
autoAdjust
>
<IconHelpOutline />
</CoreTooltip>
// After
<Tooltip.Root>
<Tooltip.Trigger render={<IconHelpOutline />} />
<Tooltip.Content side="top" align="center">
<Tooltip.Title>타이틀</Tooltip.Title>
<Tooltip.Description>툴팁 내용</Tooltip.Description>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Root>| CoreTooltip prop | Tooltip 대응 |
|---|---|
children | Tooltip.Trigger render |
title | Tooltip.Title 자식 |
text | Tooltip.Description 자식 |
placement | Tooltip.Content side + align |
autoAdjust | Floating UI collision detection 자동 처리 |
eventType="hover" | 기본 동작 |
eventType="click" | Tooltip.Root openOnHover={false} |
onClose | Tooltip.Close 서브컴포넌트 |
tailInvisible | Tooltip.Arrow 제거 |