Tooltip
요소에 마우스를 올리거나 키보드 포커스를 이동하면 간단한 툴팁이 표시되는 컴포넌트입니다. Escape 키로 열린 툴팁을 닫을 수 있습니다.
더 자세한 예제는 컴포넌트를 참고하세요. Tooltip은 Popover에서 title과 footer 기능을 제거한 기본 컴포넌트입니다.
더 자세한 예제는 컴포넌트를 참고하세요. Tooltip은 Popover에서 title과 footer 기능을 제거한 기본 컴포넌트입니다.
import { Tooltip } from 'sud-ui';사용할 때
요소에 마우스를 올리거나 키보드 포커스를 둘 때 간단한 툴팁이 필요한 경우
사용예제
Soon UI Design
Basic Usage
기본 사용 예시입니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| children | Tooltip 트리거 역할을 하는 요소 | ReactNode | - |
| content | Tooltip 내용 | string | ReactNode | - |
| trigger | 트리거 방식입니다. hover는 포커스 진입에도 표시됩니다. | click | hover | contextMenu | hover |
| placement | Tooltip 위치 (top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom) | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right | left-top | left-bottom | right-top | right-bottom | top |
| open | Tooltip 열림 상태 (제어용) | boolean | - |
| defaultOpen | Tooltip 기본 열림 상태 | boolean | false |
| onOpenChange | Tooltip 열림 상태 변경 콜백 | (open: boolean) => void | - |
| closeOnClick | 클릭 시 닫기 여부 | boolean | true |
| arrow | 화살표 표시 여부 | boolean | true |
| disabled | 비활성화 여부 | boolean | false |
| background | 배경색(palette값 또는 HEX code) | string | - |
| color | 텍스트 색상(palette값 또는 HEX code) | string | - |
| border | 테두리 표시 여부 | boolean | true |
| borderColor | 테두리 색상(palette값 또는 HEX code) | string | - |
| borderType | 테두리 스타일 | solid | dashed | dotted | double | groove | ridge | inset | outset | none | solid |
| borderWeight | 테두리 두께 | number | 1 |
| shape | Tooltip 모양 | square | rounded | circle | rounded |
| shadow | 그림자 효과 | none | sm | md | lg | sm |
| colorType | 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | sub |
| className | 추가 클래스명 | string | - |
| style | 추가 스타일 | React.CSSProperties | {} |