# Tooltip
Chú thích ngắn cho nút icon và chỉ số, ví dụ "Hồi chiêu 5 phút".

## Khi nào dùng
- Giải thích nút chỉ có icon hoặc một chỉ số khó hiểu bằng một câu ngắn.
- Không đặt thông tin thiết yếu hay nút bấm bên trong tooltip.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Nổi | `tt-tooltip` | Do `TTMU.tooltip` tạo, vị trí cố định theo trigger |
| Dưới trigger | `tt-tooltip--bottom` | Tự thêm khi không đủ chỗ phía trên |
| Minh hoạ | `tt-tooltip--inline` | Nằm theo dòng, luôn hiện (tài liệu) |

## Cấu trúc
```html
<button type="button" class="tt-iconbutton" id="cd" aria-label="Hồi chiêu">…</button>
<script>TTMU.tooltip(document.getElementById("cd"), "Hồi chiêu 5 phút");</script>
```
JS tạo `<div class="tt-tooltip" role="tooltip" id="tt-tooltip-N">` vào `.tt-app` (như Toast, Dialog, UrgentAlert; không có `.tt-app` thì mới dùng `<body>`) và thêm `aria-describedby` cho trigger.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Ẩn | `visibility: hidden` |
| `is-shown` | Hiện với mũi tên chỉ vào trigger |

## Hành vi JS
```js
var t = TTMU.tooltip(trigger, "Hồi chiêu 5 phút", { placement: "top" });
t.show(); t.hide(); t.setText("…"); t.destroy();
```
- Hiện khi hover và focus; ẩn khi rời chuột, blur, Esc hoặc cuộn. Esc nghe ở `window` (pha capture): khi tooltip đang hiện thì Esc chỉ ẩn tooltip, không đóng Dialog bên dưới (lần Esc kế tiếp mới đóng Dialog).
- Cảm ứng: nhấn giữ ~400ms để hiện, thả tay ẩn sau ~1,5s.
- Tooltip `pointer-events: none` nên không chặn click. Chữ gán bằng `textContent`.
- Tap thường trên cảm ứng không hiện tooltip (chỉ nhấn giữ). Đặt lại vị trí khi `resize`; kẹp trong khung nhìn cả ngang lẫn dọc.
- `z-index: 100070` nằm trên Toast (100000), Dialog (100050) và UrgentAlert (100060), nên tooltip trong hộp thoại vẫn thấy được.

## Token sử dụng
`ink`, `bg`, `shadow-board`, `radius-10`, `space-6/10`.

## Khả năng tiếp cận
- `role="tooltip"` + `aria-describedby` trên trigger; Esc đóng được.
- Trigger vẫn phải có tên (`aria-label` hoặc chữ), tooltip chỉ bổ sung mô tả.
- WCAG 1.4.13: tooltip đóng được bằng Esc và không biến mất khi focus còn ở trigger; do `pointer-events: none` nên không rê chuột vào tooltip được (không "hoverable"), vì vậy không đặt nội dung cần thao tác trong đó.
- Chữ `bg` trên nền `ink` đạt tương phản cao ở cả 5 theme.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Một câu ngắn, dưới 40 ký tự | Đoạn văn hoặc liên kết |
| Dùng cho thông tin phụ | Giấu thông tin bắt buộc trong tooltip |

## Nguồn
Bổ sung có chủ đích: game không có tooltip. Thiết kế theo hệ thống: nền `ink`, bo `radius-10`, bóng phẳng `shadow-board`.