툴팁 (Tooltip)
툴팁 (Tooltip)
출처: 문서
본문
마우스를 올렸을 때 안내 정보를 표시해주는 컴포넌트예요.
기본 사용법 (Basic Usage)
Tooltip 컴포넌트는 기본적으로 is-dark 테마를 내장하고 있어요.
테마 (Theme)
Tooltip 컴포넌트는 dark, light, tooltip-theme-xxx 커스텀 테마 등 4가지 테마를 제공해요. 프로덕션에서는 보통 CDN/CDN style import를 통해 테마 관련 CSS 파일을 가져와요.
배치 (Placement)
툴팁에는 12가지 배치 선택지가 있어요.
더 많은 컨트롤 (More Controls)
이 props를 사용해서 Tooltip의 동작을 제어할 수 있어요: "trigger" | "effect" | "placement" | "default-visible" | "disabled" | "content" | "show-after" | "hide-after" | "auto-close" | "controlled" | "persistent" | "open-delay" | "close-delay" | "virtual-triggering" | "role" | "append-to" | "popper-class" | "popper-style" | "enterable" | "teleported" | "show-arrow" | "transition" | "raw-content" | "aria-label" | "render-content" (총 26개).
가상 요소와 함께 사용 (Usage With Virtual Elements)
가상 트리거 모드를 사용해서 Tooltip Trigger를 Virtual Element로 사용할 수 있어요.
API
Tooltip 속성 (Attributes)
| Name | Description | Type | Default |
|---|---|---|---|
| append-to | Tooltip 컴포넌트가 붙는 요소 | CSSSelector / HTMLElement | body |
| effect | Tooltip 테마. 내장 테마: dark / light | enum | dark |
| content | 표시 콘텐츠. #content 슬롯으로 덮어쓸 수 있어요 | String | — |
| placement | Tooltip의 위치 | enum | bottom |
| visible / v-model:visible | Tooltip의 가시성 | boolean | false |
| corresponding-element | App에 의해 연결된 요소 쌍 (가상 트리거링에서만 사용) | HTMLElement | — |
| virtual-triggering | 가상 트리거링 사용 여부 | boolean | false |
| virtual-ref 2.5.1 | 가상 참조 요소 | HTMLElement | — |
| raw-content | 콘텐츠를 html로 렌더링할 수 있는지 여부 | boolean | false |
| persistence 2.8.3 | 보이지 않을 때도 툴팁이 DOM에 남아 있게 하는 옵션 | boolean | false |
| auto-close | 마우스가 떠난 후 툴팁이 숨겨지기까지의 지연(ms). 0이면 즉시 닫혀요 | number | 0 |
| trigger | 툴팁이 트리거되는 방식 | enum | hover |
| open-delay | 트리거 후 툴팁이 표시되기까지의 지연(ms) | number | 0 |
| close-delay | 트리거 후 툴팁이 숨겨지기까지의 지연(ms) | number | 0 |
| show-after | 마우스가 들어온 후 툴팁이 표시되기까지의 지연(ms) | number | 0 |
| hide-after | 마우스가 떠난 후 툴팁이 숨겨지기까지의 지연(ms) | number | 0 |
| disabled | Tooltip 비활성화 여부 | boolean | false |
| strategy 2.3.0 | 포지셔닝 전략 | enum | absolute |
| teleported | 툴팁을 body로 텔레포트할지 여부 | boolean | true |
| persistent | 툴팁 영속 여부 | boolean | false |
| transition | 전환 | string | el-fade-in-linear |
| popper-class | popper의 커스텀 클래스 이름 | string | — |
| popper-style | popper의 커스텀 스타일 | array / string / object | — |
| show-arrow | 툴팁에 화살표가 있는지 여부 | boolean | true |
| enterable | 마우스가 툴팁 안으로 들어갈 수 있는지 여부 | boolean | true |
| aria-label | 네이티브 aria-label과 동일 | string | — |
| role | role 속성 | enum | tooltip |
| render-content | ReactNode로 메시지를 렌더링 | Function to create VNode | — |
Tooltip 이벤트 (Events)
| Name | Description | Type |
|---|---|---|
| before-show | 툴팁이 표시되기 전에 트리거돼요 | Function |
| before-hide | 툴팁이 숨겨지기 전에 트리거돼요 | Function |
| show | 툴팁이 표시된 후 트리거돼요 | Function |
| hide | 툴팁이 숨겨진 후 트리거돼요 | Function |
Tooltip 슬롯 (Slots)
| Name | Description |
|---|---|
| default | 툴팁 트리거와 콘텐츠 |
| content | 콘텐츠 |
Exposes
- updatePopper