InfoHint

O InfoHint guarda o porquê fora do caminho do olhar. Em vez de um parágrafo sob o título, a tela mostra o estado e a ação, e a explicação de uma ou duas frases fica atrás de um ícone ⓘ. No desktop abre ao passar o mouse; no celular, ao tocar; no teclado, por Enter ou Espaço.

import { InfoHint } from "@rastreio-x/ui";

Padrão

label nomeia o botão para leitores de tela; os filhos são a explicação, em até duas frases.

Posição

placement escolhe o lado em que a camada abre: top (padrão), bottom, left ou right. Se não houver espaço, ela se reposiciona.

Ao lado de um selo

O estado fica à vista e o porquê, a um toque.

Em linha de contexto

Dentro de um valor da MetaLine, o detalhe longo sai da frente.

No cabeçalho

Subtítulo curto e o ⓘ ao lado, no lugar de um texto corrido sob o título.

Anatomia

InfoHint
├── Button (ghost, só ícone)   aria-label = label
│   └── ícone ⓘ                 aria-hidden
└── Popover
    └── Dialog                  a explicação (children)

O gatilho é um Button do HeroUI e a camada é um Popover; o hover do mouse só abre com ponteiro de mouse, nunca por foco de teclado.

Propriedades

Animações

A camada entra e sai com a transição do Popover do HeroUI, em opacidade e escala curtas. O selo de movimento vem do arquivo action.tsx, que também importa o StateBlock. Com prefers-reduced-motion, a folha global da fachada reduz a transição a 0,01 ms.

Acessibilidade

• O gatilho é um <button> com aria-label vindo de label: nomeie o assunto ("Sobre as chaves"), não "Ajuda".
• Enter e Espaço abrem; Esc fecha e devolve o foco ao gatilho. O foco sozinho não abre, para não roubar o foco do diálogo.
• No toque, o gesto é o clique; o hover é só do mouse.
• O conteúdo mora num Dialog, então o leitor de tela o encontra em ordem e pode lê-lo inteiro.
• Nada que muda a decisão fica só no ⓘ: o estado e a ação estão sempre visíveis.

Boas práticas

• Use label com o assunto: "Sobre o escopo lido".
• Até duas frases; se for mais, a tela está errada, não o ícone.
• Coloque o ⓘ colado ao que ele explica: título, selo ou valor.
• Não use para erro que bloqueia: mostre um Alert ou StateBlock.

Relacionados

• Popover a camada em que o ⓘ se apoia.
• Tooltip para um rótulo curto de um botão só de ícone.
• StatusBadge o selo ao lado do qual o ⓘ aparece.
• MetaLine a linha de contexto que pode levar um ⓘ.