Componentes
23. Tooltip
seed-componentes.md v1.43 · §23seção 25 de 9823-tooltip-estavel-validado-pelo-rafael-em-2026-08.md · MD5 4cbcf935Título completo no canon: 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)#
- 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#
- 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.)