Visualização não disponível para mobile
Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.
Visão geral
O Tooltip é um componente de interface de usuário utilizado para exibir informações adicionais ou explicativas quando o usuário passa o cursor sobre, focaliza, ou toca em um elemento específico. É uma maneira eficiente de fornecer detalhes contextuais sem sobrecarregar a interface.
Do's and Don'ts
✅ Para fornecer informações adicionais sobre um elemento sem ocupar espaço na interface.✅ Para descrever ícones ou botões que podem não ser imediatamente claros para o usuário.✅ Em formulários para fornecer dicas ou exemplos sobre os dados esperados em um campo.
🚫 Para informações críticas que o usuário deve ver imediatamente, pois os tooltips aparecem apenas em interação.
🚫 Quando o espaço da tela é muito limitado para permitir a interação necessária para exibir o tooltip.
🚫 Em dispositivos móveis, se a interação de passar o cursor não for intuitiva ou prática.
Variantes
Dark
Dark
Dark
Dark
Light
Light
Light
Light
Comportamentos
- Aparição e Desaparição: O tooltip deve aparecer imediatamente quando o usuário interagir com o elemento alvo e desaparecer quando a interação terminar.
- Posicionamento: O tooltip deve se ajustar automaticamente para permanecer visível na tela, mesmo quando o elemento alvo estiver próximo das bordas da janela.
Tooltip
Visão geral
O Tooltip é um componente de interface de usuário utilizado para exibir informações adicionais ou explicativas quando o usuário passa o cursor sobre, focaliza, ou toca em um elemento específico. É uma maneira eficiente de fornecer detalhes contextuais sem sobrecarregar a interface.
Do's and Don'ts
✅ Para fornecer informações adicionais sobre um elemento sem ocupar espaço na interface.✅ Para descrever ícones ou botões que podem não ser imediatamente claros para o usuário.✅ Em formulários para fornecer dicas ou exemplos sobre os dados esperados em um campo.
🚫 Para informações críticas que o usuário deve ver imediatamente, pois os tooltips aparecem apenas em interação.
🚫 Quando o espaço da tela é muito limitado para permitir a interação necessária para exibir o tooltip.
🚫 Em dispositivos móveis, se a interação de passar o cursor não for intuitiva ou prática.
Variantes
Dark
Dark
Dark
Dark
Light
Light
Light
Light
Comportamentos
- Aparição e Desaparição: O tooltip deve aparecer imediatamente quando o usuário interagir com o elemento alvo e desaparecer quando a interação terminar.
- Posicionamento: O tooltip deve se ajustar automaticamente para permanecer visível na tela, mesmo quando o elemento alvo estiver próximo das bordas da janela.