툴팁 (Tooltip)

툴팁은 요소에 마우스를 올리거나 포커스했을 때 짧은 보조 설명을 말풍선으로 보여주는 요소로, 아이콘처럼 이름만으로 뜻이 다 전달되지 않는 대상에 맥락을 더할 때 사용해요.

Usage

import { Tooltip, Button } from "podo-ui/react";import "podo-ui/styles.css";
{/* hover/focus에 표시, Escape로 닫힘 — 기본은 document.body 포탈 */}<Tooltip label="임시 저장돼요" position="top" ordinal="second">  <Button size="sm">저장</Button></Tooltip>

테마 (theme)

툴팁의 배경과 글자 색 조합을 정하는 속성이에요. default는 어두운 배경에 밝은 글자로, reverse는 밝은 배경에 어두운 글자로 표시돼요. 툴팁이 놓이는 화면 배경과 대비되는 쪽을 골라 내용이 잘 읽히도록 해요.

base
propertiesdefaultreverse

위치 (position)

기준이 되는 요소를 중심으로 툴팁이 어느 방향에 나타날지 정하는 속성이에요. right·left·bottom·top 중에서 골라, 화살표가 대상을 가리키도록 연결해요. 툴팁이 화면 밖으로 잘리거나 다른 요소를 가리지 않는 방향을 선택해요.

propertiesrightleftbottomtop

순서 (ordinal)

화살표가 툴팁의 어느 지점에 붙을지 정하는 속성이에요. first·second·third 순서로 화살표가 시작점에서 가운데, 끝점으로 이동해요. 가리키려는 대상의 위치에 맞춰 화살표를 정렬할 때 사용해요.

propertiesfirstsecondthird

속성 (props)

podo-ui/react의 Tooltip이 받는 속성이에요. 트리거 요소 하나를 자식으로 감싸면 hover/focus 핸들러와 aria-describedby가 주입되고, 말풍선은 기본적으로 document.body 포탈에 fixed 좌표로 붙어 overflow·z-index에 잘리지 않아요. 열려 있는 동안 스크롤·리사이즈가 일어나면 좌표가 무효라 닫혀요.

PropTypeDefault설명
labelReactNode— (필수)말풍선 내용 (14px)
childrenReactElement— (필수)트리거 요소 하나. hover/focus/Escape 핸들러와 aria-describedby가 주입돼요
position"right" | "left" | "bottom" | "top""right"대상 기준 표시 방향. 화살표가 대상을 가리켜요
ordinal"first" | "second" | "third""first"화살표가 말풍선의 시작/가운데/끝 어디에 붙는지. 포탈 배치도 화살표가 대상 중심을 가리키도록 맞춰져요
theme"default" | "reverse""default"어두운 배경(default) / 밝은 배경(reverse)
portalbooleantruedocument.body 포탈 + 트리거 좌표 고정. false면 흐름 안에 그대로 렌더돼요
openboolean— (비제어)표시 여부를 코드에서 제어해요. 생략하면 hover/focus로 스스로 열고 닫아요