Components / New
Tooltip
A short label that appears on hover or focus. It names an icon-only control and never holds anything people must read to continue.호버나 포커스 시 나타나는 짧은 레이블입니다. 아이콘만 있는 컨트롤의 이름을 알려 주며, 진행에 꼭 필요한 내용은 담지 않습니다.
Hover or focus호버 또는 포커스
Tooltips wait 300ms on hover but appear instantly on keyboard focus. Press Esc to dismiss.호버 시 300ms 기다렸다 나타나고, 키보드 포커스에는 즉시 나타납니다. Esc로 닫을 수 있어요.
Anatomy구조
- 1Container컨테이너
Inverse background, 8px radius, max 240px wide.반전 배경, 모서리 8px, 최대 너비 240px.
- 2Label레이블
12.5px, one line when possible. No punctuation at the end.12.5px, 가능하면 한 줄. 끝에 마침표 없음.
- 3Arrow화살표
Points at the trigger, 10px away from it.트리거를 가리키며, 10px 떨어져 있습니다.
Markup
<span class="dy-tooltip-wrap">
<button class="dy-button secondary icon-only"
aria-label="Share this moment" aria-describedby="tip-share">
<svg aria-hidden="true">...</svg>
</button>
<span role="tooltip" id="tip-share" class="dy-tooltip">Share this moment</span>
</span><span class="dy-tooltip-wrap">
<button class="dy-button secondary icon-only"
aria-label="이 순간 공유하기" aria-describedby="tip-share">
<svg aria-hidden="true">...</svg>
</button>
<span role="tooltip" id="tip-share" class="dy-tooltip">이 순간 공유하기</span>
</span>Usage사용 가이드
Keep it to a few words몇 단어로 짧게
Name the action in two to five words. It should read like the button's label.행동을 2~5단어로 이름 짓습니다. 버튼 레이블처럼 읽혀야 합니다.
Don't put paragraphs, links or buttons in a tooltip. Use a popover or inline help.툴팁에 문단, 링크, 버튼을 넣지 않습니다. 팝오버나 인라인 도움말을 씁니다.
Never hide essentials필수 정보는 숨기지 않기
Show requirements, like password rules, as visible hint text below the field.비밀번호 규칙 같은 요구 사항은 입력창 아래 보이는 힌트로 보여 줍니다.
Don't tuck required information into a tooltip. Touch screens have no hover.꼭 필요한 정보를 툴팁에 숨기지 않습니다. 터치 화면에는 호버가 없습니다.
Behavior동작
| Trigger트리거 | Show표시 | Hide숨김 |
|---|---|---|
| Mouse hover마우스 호버 | After 300ms300ms 후 | On leave벗어날 때 |
| Keyboard focus키보드 포커스 | Immediately즉시 | On blur or Esc포커스 해제 또는 Esc |
| Touch터치 | Not shown, use a visible label표시 안 함, 보이는 레이블 사용 | - |