Tooltip
- Angular:
[mdsTooltip] - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Tooltip é uma pequena etiqueta flutuante que aparece ao passar o mouse ou focar em um elemento. Ele fornece informações contextuais curtas para ajudar o usuário a entender a função de um controle ou o significado de um dado.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Brevidade: Use o menor número de palavras possível. Evite artigos e preenchimentos.
- Ruim: Clique aqui para editar este registro.
- Melhor: Editar registro
- Pontuação Final: Não utilize ponto final para frases únicas e curtas. Use pontuação apenas se o Tooltip contiver duas ou mais frases (o que deve ser evitado).
- Sem Reticências: Não use reticências em textos de Tooltip; ele deve ser uma informação completa por si só.
- Não se Repita: Se o botão já possui um rótulo de texto, não use um Tooltip que repita o mesmo texto.
- Acessibilidade: Tooltips são essenciais para descrever ícones que não possuem texto visível ao lado.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Ícone de Impressão | Clique para imprimir o manifesto de carga. | Imprimir manifesto |
| Sigla Técnica | ICMS é o Imposto sobre Circulação de Mercadorias. | Imposto sobre circulação de mercadorias |
| Status de Ícone | Este veículo está parado no pátio agora. | Veículo em pátio |