컴포넌트
TooltipFade
트리거에 호버하거나 포커스하면 상·하·좌·우 4방향으로 페이드+슬라이드하며 등장하는 순수 CSS 툴팁 컴포넌트다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TooltipFade-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| content | string | "브랜드 컬러로 페이드되는 툴팁" | 툴팁 안에 표시할 텍스트 |
| triggerLabel | string | "호버해보세요" | 툴팁을 띄우는 트리거 버튼의 라벨(및 aria-label) |
| direction | "top" | "bottom" | "left" | "right" | "top" | 툴팁이 등장하는 4방향 위치 |
| delay | number | 100 | 호버 후 툴팁이 나타나기까지의 지연 시간(ms) |
| arrow | boolean | true | 툴팁 화살표(꼬리) 표시 여부 |
| className | string | undefined | 컨테이너에 적용할 추가 className |