# STooltip

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### STooltip

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content?` | `ReactNode` | — | 툴팁 본문 (ReactNode). message 보다 우선 |
| `message?` | `string[]` | `[]` | 툴팁 본문 줄 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
| `open?` | `boolean` | — | 열림 상태 (제어). 지정하면 controlled — hover·click·`ref.show()/hide()` 가 이 값을 덮지 않는다 |
| `trigger?` | `STooltipTrigger` | `'hover'` | 트리거 방식. `'none'` = 트리거 없음 — `open` 으로만 제어되는 상시 표시 툴팁 |
| `placement?` | `STooltipPlacement` | `'top'` | 표시 방향 |
| `sideOffset?` | `number` | `8` | 앵커와의 간격(px) |
| `tooltipType?` | `STooltipType` | `'default'` | 배경/텍스트 색상 타입 |
| `useClose?` | `boolean` | `false` | 우측 상단 닫기 버튼. 켜면 자동 닫힘이 비활성화되고 X(또는 hide())로만 닫힘 (hover·click 공통, `trigger='none'` 에서는 무시) |
| `disabled?` | `boolean` | `false` | 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 |
| `children?` | `ReactNode` | — | 커스텀 트리거. 없으면 아이콘 트리거를 렌더 |
| `icon?` | `SIconName` | `'helpOutline'` | 기본(아이콘) 트리거 설정 |
| `iconSize?` | `number` | `12` |  |
| `color?` | `SColor` | `'#01BB4B'` | 트리거 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
| `ariaLabel?` | `string` | — | 접근성 레이블 |
| `className?` | `string` | — |  |
| `triggerClassName?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |
| `contentProps?` | `HTMLAttributes<HTMLDivElement>` | — | 툴팁 본문 요소에 그대로 전달 (`role`, `aria-*` 등). Radix 기본 `role="dialog"` 를 덮어쓸 수 있다 |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onOpenChange` | `(open: boolean) => void` | 열림 상태 변경 요청. 트리거·자동 닫힘·X 버튼·ref 모든 경로에서 호출된다 (controlled 여부와 무관) |

#### Methods (ref)

| Method | Type | Description |
|--------|------|-------------|
| `show` | `() => void` | 툴팁을 표시합니다. |
| `hide` | `() => void` | 툴팁을 숨깁니다. |

## Dependencies

### Used by

 - [SField](../SField)
 - [SKeyValueTable](../SKeyValueTable)
 - [SSectionHeaderCard](../SSectionHeaderCard)
 - [SStepper](../SStepper)

### Depends on

- [SGhostButton](../SGhostButton)
- [SIcon](../SIcon)

### Graph

```mermaid
graph TD;
  STooltip --> SGhostButton
  STooltip --> SIcon
  SField --> STooltip
  SKeyValueTable --> STooltip
  SSectionHeaderCard --> STooltip
  SStepper --> STooltip
  style STooltip fill:#f9f,stroke:#333,stroke-width:4px
```