Componentes
23. Tooltip
seed-componentes.md v2.00 · §23seção 47 de 18423-tooltip-estavel-validado-pelo-rafael-em-2026-08.md · MD5 7dad97b8Título completo no canon: Tooltip — estável · validado pelo Rafael em 2026-08-04 (crítica visual → X6-b + ancoragem; suite v0.21)
Em uma frase: Tooltip é suplementar e nunca essencial à tarefa: abre no sobrevoo e no foco, não tem nada interativo dentro, e a informação existe fora dele.
Vocabulário desta seção: toggletip
(decisão registrada — ver Histórico da seção)
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 |
Caso aplicado — o tooltip do rail recolhido (§46 SH19,
SH-P14, 2026-09-15). O rótulo do destino do rail, no estado recolhido, É o tooltip (X1: ospando rótulo fica no DOM com clip de 1 px e reaparece em:hovere:focus-visible— nada duplica texto,aria-label/titlenão substituem o nome). Posição: à direita do item, a 8 px (sp-2), centrado — exceto o PRIMEIRO destino, que vive na faixa da topbar: o tooltip dele nasce com o topo asp-2abaixo do item, porque centrado cobria o seletor de contexto (achado do estudo, medido: interseção 0 px² depois do conserto). X3 completo, por script: Esc fecha sem mover o foco (data-tooltip="fechado"no item, desfeito ao sair); hoverable pelo corredor de 8 px (o::beforedo próprio span, na calha do canvas) mais a carência de fechamento lida do token--seed-dur-expressive(300 ms) — medido: sem a carência o caminho diagonal do 1.º destino fechava a 8 px do item; persistent (sem timer). X6:surface-inverse/text-inverse(13,86 claro · 12,75 escuro, por token e no pixel),radius-3,shadow-overlay, bordaborder-defaultno escuro, z-index 80. X2: o estado recolhido não existe no toque — abaixo do limiar do SH12 o rail vai ao drawer com rótulos visíveis. Emissão única:06-validacao/ferramentas/shell_bloco.py.
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.)
Também cita o §23: tela-atividade, tela-busca, tela-chat, tela-detalhe, tela-gantt, tela-lista, tela-mensageria, tela-onboarding, tela-portal-cliente, tela-portal-parceiro, tela-quadro, tela-quadro-funil, tela-referencia, tela-shell, tela-shell-abas, tela-shell-sem-topbar, tela-tabela.