---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 23
titulo: "Tooltip — `estável` · validado pelo Rafael em 2026-08-04 (crítica visual → X6-b + ancoragem; suite v0.21)"
sequencia: 25 de 98
bytes_do_corpo: 4771
md5_do_corpo: 4cbcf935d1b39a51f4673ade25c77516
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 23. Tooltip — `estável` · validado pelo Rafael em 2026-08-04 (crítica visual → X6-b + ancoragem; suite v0.21)

> **Base (3 rodadas, 2026-08-04):** R1 — NN/g tooltip guidelines (nunca essencial à tarefa; ícones deveriam ter labels), M2/M3 (plain/rich; não repetir texto visível; não cobrir o alvo; tap-and-hold como cortesia mobile), Carbon tooltip + toggletip (nunca interativos dentro; caixa máxima; a régua hover/focus × click). R2 — Radix (mantenedores: tooltip ARIA não funciona em touch; desenhar sem tooltip onde possível), React Aria, ustwo (híbrido hover/tap documentado). R3 — WCAG 1.4.13 Understanding + SCR39 (dismissible/hoverable/persistent; Esc; F95 como falha mais comum; timer de auto-hide reprova), Heydon Pickering/Inclusive Components (a dupla rótulo × descrição; o toggletip), DHIS2/W3C (touch sem pista de que o tooltip existe), APG tooltip com aviso declarado de "sem consenso da task force".

### 23.1 A régua da sobreposição leve (governa §23–§24 + fronteira com o Bloco 4)

1. **Tooltip** — NÃO-interativo, curto, suplementar; hover/focus. 2. **Popover** (§24) — interativo leve ou texto persistente; CLIQUE; light-dismiss; não-modal. O toggletip é a variante de texto do popover. 3. **Modal/dialog** — decisão obrigatória, form, backdrop, foco preso → Bloco 4 (Hidde: "se está considerando backdrop no popover, talvez seja um dialog"; Heydon: conteúdo interativo — até um OK — é dialog).

### 23.2 Decisões X1–X6

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| X1 | Dois papéis com ARIA distinta: **rótulo** de controle só-ícone (`aria-labelledby` — o tooltip É o nome, 1–2 palavras) × **descrição** suplementar (`aria-describedby`). NUNCA informação essencial; NUNCA repetir texto visível | Heydon (Primary Label × Auxiliary description); NN/g; M2 | Tooltip como esconderijo de informação obrigatória |
| X2 | **DECISÃO TOUCH:** tooltip não é portador de informação no toque — TODO uso declara equivalente touch: (a) controle com ação própria → rótulo VISÍVEL no mobile (paridade estrutural); long-press exibe o rótulo como cortesia (M3), nunca canal único; (b) gatilho informativo dedicado (ⓘ) → no touch o MESMO gatilho vira toggletip por tap | Radix, DHIS2 (touch não acessa e não tem pista), Heydon, M3 — convergência incomum de 4 fontes independentes | Ícone mudo no touch; híbrido como única fonte |
| X3 | 1.4.13 completo: **hoverable** (corredor — mover o mouse PARA o tooltip não fecha), **persistent** (SEM auto-hide por timer), **dismissible** (Esc fecha sem mover o foco). Delay de abertura 500ms; grupo aquecido: adjacentes abrem sem delay | WCAG 1.4.13/SCR39; TestParty (F95 = sumir ao tentar ler; timer 2–3s reprova); caso Blueprint (sem Esc = violação) | Auto-hide por timer; tooltip que foge do mouse |
| X4 | `role="tooltip"`; NUNCA recebe foco; máx. ~2 linhas (mais = popover). Fato declarado: o APG segue "work in progress, sem consenso" — ancoragem no 1.4.13 + prática convergente | O próprio APG; ARIA 1.2 estável nos atributos, comportamento em evolução; Carbon (caixa máxima) | Fingir spec fechada |
| X5 | NUNCA em elemento `disabled` (não dispara eventos nem recebe foco — o tooltip não abre); o porquê-desabilitado vai para helper text visível ou o controle fica habilitado com validação | "Disabled-button trap" documentado; filosofia do §0 (estado explicado visivelmente) | Tooltip explicando botão morto |
| X6-b | *(emenda da validação visual do Rafael, 2026-08-04)* Gatilho informativo usa o **ícone SVG info do T3** (barra + ponto, sem círculo próprio — o container circular já é o círculo), NUNCA o caractere unicode ⓘ: além do círculo duplicado, caractere de fonte renderiza inconsistente entre plataformas | Crítica visual medida e acatada | Caractere ⓘ (círculo dentro de círculo; drift tipográfico) |
| X6 | Visual: fundo cinza-900 + texto branco no light (par **13.86 AAA**, medido) e cinza-100 + texto cinza-900 no dark (**11.49 AAA**; borda cinza-600 contra a página 3.60); radius 6; 4–8px do alvo; seta opcional; flip anti-overflow; nunca cobre o alvo; reduced-motion: seco | M3 (posição dinâmica; não cobrir o pai); pares medidos na suite v0.21 | Tooltip claro-sobre-claro |

### 23.3 Os 7 testes

1. Pares do X6 medidos ✓. 2. Rótulo por texto (o tooltip É texto). 3. Grayscale: nasce alto-contraste. 4. Tooltip × popover a 1s (sem interativos/sem foco × com). 5. Um tooltip aberto por vez (abrir outro fecha o anterior). 6. Informação nunca SÓ no tooltip (X1/X2). 7. 360px: o equivalente touch existe declarado (rótulo visível ou toggletip). *(Verificado: suite v0.21, aprovado.)*

---