syidaxdesign system
홈 가격 내 정보
ComponentsOverlays

Tooltip

요소에 대한 짧은 보조 설명을 제공합니다.

<sy-tooltip>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="변경 사항을 저장합니다."
      position="top"
      trigger="hover"
      maxwidth="220"
      opendelay="0"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

사용 가이드

#

아이콘·축약된 이름처럼 짧은 보충 설명이 필요할 때 사용합니다.

읽기만 하는 설명

대상 요소 안에 Tooltip을 배치하고 content에 짧은 설명을 넣습니다. hover·click·focus 또는 open으로 표시합니다.

클릭하거나 입력할 내용

설명 안에 조작이 필요하다면 Popover를 사용하세요.

예제

#

클릭 설명

버튼을 눌러 설명을 표시합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="변경 사항을 저장합니다."
      trigger="click"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

키보드 안내

Tab으로 버튼에 포커스하면 설명이 표시됩니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="변경 사항을 저장합니다."
      trigger="focus"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

긴 설명 줄바꿈

maxWidth로 폭을 제한합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="저장한 내용은 팀원과 공유되며 언제든지 다시 수정할 수 있습니다."
      trigger="click"
      maxwidth="160"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

항상 표시

자동 트리거 없이 open으로 표시합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="변경 사항을 저장합니다."
      trigger="none"
      open
      position="bottom"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

화살표 생략

필요에 따라 화살표를 숨깁니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="변경 사항을 저장합니다."
      trigger="click"
      hidearrow
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

지연 표시 툴팁

마우스를 올린 뒤 400ms 후에 열고 벗어나면 200ms 후에 닫습니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>도움말<sy-tooltip
      content="변경 사항을 저장합니다."
      position="top"
      trigger="hover"
      maxwidth="220"
      opendelay="400"
      closedelay="200"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "opendelay": 400,
    "closedelay": 200
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-tooltip>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseControls whether the tooltip arrow is hidden
booleanfalse자동 트리거와 별도로 설명을 표시합니다.
number0Delay in milliseconds before closing the tooltip after trigger event ends
number | nullnullMaximum width of the tooltip in pixels
number0Delay 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

MethodReturnsDescription
Promise<void>열린 패널을 닫습니다.
Design SystemTab 이동 Enter 열기