Dica

O texto da dica vive num atributo de dados e é desenhado por um pseudo-elemento, por isso não há script, nada para posicionar em tempo de execução e nada que fique para trás no DOM. Aparece ao passar o rato e ao receber foco pelo teclado, do que trata a metade :focus-within da regra.

Dica básica

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Copiar para a área de transferência' },
    iconButton({
      label: 'Copiar',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Reconstruir o site' },
    button({ variant: 'outline', color: 'neutral' }, 'Reconstruir'),
  ),
)

Posicionamento

Por cima por predefinição, por baixo quando não há espaço em cima.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Por cima do acionador' },
    button({ variant: 'soft', color: 'neutral' }, 'Cima'),
  ),
  tooltip({ content: 'Por baixo do acionador', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Baixo'),
  ),
)

Nomes acessíveis

O texto da dica é decoração — é desenhado a partir do content do CSS, que os leitores de ecrã não anunciam de forma fiável. O controlo lá dentro continua a precisar do seu próprio nome acessível, que é o que o label do iconButton() dá. Quando a dica disser algo que o nome do controlo não diz, passa label: true para o repetir num span escondido visualmente.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Publica em produção imediatamente', label: true },
    button({ color: 'danger' }, 'Publicar'),
  ),
)

Sobre texto

Uma dica envolve conteúdo inline com a mesma facilidade com que envolve um botão.

text(
  'A construção escreve em ',
  tooltip({ content: 'Configurável com outDir' }, code('dist/')),
  ' e mais nada.',
)

Quando não usar

As dicas não aparecem no toque, e desvanecem-se assim que o ponteiro sai. Tudo o que o leitor tem mesmo de ver — uma mensagem de erro, a explicação de um campo obrigatório — pertence ao texto de help do próprio campo, não a uma dica.

Props