Tooltip
요소에 대한 짧은 보조 설명을 제공합니다.
사용 가이드
#아이콘·축약된 이름처럼 짧은 보충 설명이 필요할 때 사용합니다.
읽기만 하는 설명
대상 요소 안에 Tooltip을 배치하고 content에 짧은 설명을 넣습니다. hover·click·focus 또는 open으로 표시합니다.
클릭하거나 입력할 내용
설명 안에 조작이 필요하다면 Popover를 사용하세요.
예제
#기능별 예제
#12개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.
일치하는 기능이 없습니다.
API reference
#이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.
<sy-tooltip>
Properties
| Attribute / Property | Type | Default | Description |
|---|---|---|---|
boolean | false | Controls whether the tooltip arrow is hidden | |
boolean | false | 자동 트리거와 별도로 설명을 표시합니다. | |
number | 0 | Delay in milliseconds before closing the tooltip after trigger event ends | |
number | null | null | Maximum width of the tooltip in pixels | |
number | 0 | Delay in milliseconds before opening the tooltip after trigger event starts | |
string | '' | 짧은 보조 설명입니다. | |
'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'top' | 설명할 요소를 기준으로 표시할 방향입니다. | |
'hover' | 'click' | 'focus' | 'none' | 'hover' | 목록 또는 팝업을 여는 사용자 동작입니다. | |
| 'none'
| 'fade' | 'fade-scale' | 'zoom' | 'pop'
| 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right'
| 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right'
| 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right'
| 'flip-x' | 'flip-y' | 'bounce' | 'spin' | 'none' | Enter/exit animation type. `none` (default) toggles instantly. The host itself is the popup, so the animation runs on the host element directly (including the dynamically-attached arrow). `slide-*` and `reveal-*` use explicit directions because the tooltip's `position` attribute drives anchor placement, not animation direction. | |
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow' | 'fast' | Animation playback speed token. Maps to `--transition-*` global tokens. |
Methods
| Method | Returns | Description |
|---|---|---|
Promise<void> | 열린 패널을 닫습니다. |