# Component/Tooltip/Basic

특정 요소에 마우스를 가져다 대었을 때 추가적인 도움말이나 정보를 표시하며 한두 줄 정도의 짧은 내용을 담습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `content` | `ReactNode | TooltipContentWithCloseAction` | No |  |  |
| `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
| `openerTriggerEvent` | `undefined "none" "click" "hover"` | No | hover |  |
| `placement` | `undefined "bottom" "left" "right" "top"` | No | top |  |
| `zIndex` | `number | undefined` | No | getZIndex('tooltip') |  |
| `noUsePortal` | `boolean | undefined` | No | false | main app node 바깥영역으로 생성할지 여부 |
| `close_delay` | `number | undefined` | No | 250 | Hover 후 닫히는 지연 시간 |
| `opened` | `boolean | undefined` | No |  |  |
| `onClose` | `((reason: TooltipOpenChangeReason) => void) | undefined` | No |  |  |
| `onOpen` | `((reason: TooltipOpenChangeReason) => void) | undefined` | No |  |  |
| `size` | `undefined "small" "medium" "large"` | No | medium |  |
| `kind` | `undefined "neutral" "negative" "accent"` | No | accent |  |