` + `
` 로, 없으면 `content` 를 그대로 넣습니다. 구현은 제어 모드용 `onOpenChange` 를 함께 받습니다. | --- ## 5. Component tokens | 대상 | 속성 | Token | Value | |---|---|---|---| | Container | background | `{color.bg.tooltip}` | 라이트 `#1a1b20` / 다크 `#3a3b45` | | Container | color | `{color.fg.tooltip}` | 라이트 `#ffffff` / 다크 `#f3f3f5` | | Container | padding | `{space.x2}` `{space.x3}` | 8px 12px | | Container | radius | `{radius.r2}` | 8px | | Container | shadow | `{shadow.s2}` | 0 2px 8px | | Arrow | background | `{color.bg.tooltip}` | Container 와 동일 | | Motion | duration · easing | `{duration.fast}` | 120ms · `{easing.out}` | 최대 너비(240px), 폰트(13px), 행간(1.5), Arrow 크기(12×6px), 대상과의 간격(4px)은 토큰이 아닌 이 엘리먼트의 상수입니다. Container 는 두 테마 모두 **어두운 칩**이므로, `tokens.css` 에서 이 토큰만 라이트/다크를 따로 정의합니다. 다크 모드에서는 카드 표면(`#26272e`)보다 밝은 `#3a3b45` 여야 위에 떠 보입니다. 그 위에 `--atom-shadow-s2` 를 얹어 카드 위에 놓였을 때의 경계를 만듭니다. Arrow 는 `clip-path` 삼각형입니다. 꼬리가 12×6 인 납작한 삼각형이라 45° 모서리로는 같은 모양이 나오지 않고, 회전한 사각형이라면 둥근 모서리 밖으로 삐져나오는 꼭짓점을 가리려고 클리핑 상자를 하나 더 두어야 합니다. Container 와 5px(꼬리 높이 6px 보다 1px 적게) 겹치게 둔 것은 반픽셀 위치에서 꼬리와 본체 사이에 실선이 비치지 않게 하기 위해서입니다. ```json { "tooltip": { "container": { "background": { "$type": "color", "$value": "{color.bg.tooltip}" }, "color": { "$type": "color", "$value": "{color.fg.tooltip}" }, "padding-block": { "$type": "dimension", "$value": "{space.x2}" }, "padding-inline": { "$type": "dimension", "$value": "{space.x3}" }, "radius": { "$type": "dimension", "$value": "{radius.r2}" }, "shadow": { "$type": "shadow", "$value": "{shadow.s2}" } }, "arrow": { "$type": "color", "$value": "{color.bg.tooltip}" }, "motion": { "duration": { "$type": "duration", "$value": "{duration.fast}" }, "easing": { "$type": "cubicBezier", "$value": "{easing.out}" } } } } ``` --- ## 6. 접근성 > [!NOTE] > **ARIA 배선** > 말풍선에 `role="tooltip"` 과 `id` 를 주고, 대상 요소가 `aria-describedby` 로 그 `id` 를 > 가리킵니다. `aria-labelledby` 가 아닌 이유는 툴팁이 **이름이 아니라 설명**이기 > 때문입니다. 아이콘 버튼의 이름은 `aria-label` 이 담당합니다. 참고한 네 시스템 중 이 > 배선을 문서화한 곳이 없어 ATOM 이 정한 규칙입니다. - **대비** — `--atom-fg-tooltip` on `--atom-bg-tooltip` 은 라이트 17.19:1 입니다. 13px 은 "큰 텍스트" 예외에 들지 않으므로 4.5:1 기준을 그대로 적용해야 하고, 현재 값은 이를 넘습니다. - **`title` 속성을 쓰지 않습니다** — 브라우저 기본 `title` 툴팁은 지연을 제어할 수 없고, 터치와 키보드에서 나타나지 않으며, 스타일을 입힐 수 없습니다. - **`data-state="closed"` 는 `display: none` 입니다** — 접근성 트리에서도 빠지므로, 닫힌 툴팁의 내용이 스크린리더에 미리 읽히지 않습니다. 툴팁의 내용은 **놓치기 쉬운 정보**라는 전제로 씁니다. - **툴팁에만 있는 정보는 접근할 수 없는 정보로 봅니다** — 터치 기기에는 hover 가 없고, 스크린리더 사용자도 놓치기 쉽습니다. 꼭 필요한 정보는 화면에 그대로 두고 툴팁은 보조로만 씁니다. - **트리거는 초점을 받을 수 있어야 합니다** — `` 에 hover 만 걸면 키보드로는 볼 수 없습니다. `