Tooltip
Tipo: Core
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
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 |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”[mdsTooltip]
Seção intitulada “[mdsTooltip]”Inputs
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
mdsTooltip |
string |
'' |
— |
disableTooltip |
boolean |
false |
— |
placement |
Placement |
'top' |
— |
variation |
TooltipVariation |
'primary' |
— |
triggers |
string |
'mouseenter:mouseleave' |
— |
closeDelay |
number |
0 |
— |
openDelay |
number |
200 |
— |
mds-tooltip
Seção intitulada “mds-tooltip”Inputs
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
text |
string |
'' |
— |
variation |
'primary' | 'secondary' |
'primary' |
— |
placement |
Placement |
'top' |
— |