Popover
- Angular:
mds-popover - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Popover é um painel flutuante que exibe conteúdos informativos ou interativos relacionados a um elemento específico. Ele é ativado por clique ou mouseover e permanece visível até que o usuário interaja com ele ou clique fora da sua área.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Conteúdo Rico: Utilize para exibir resumos, mini-formulários ou grupos de ações que exigem mais contexto do que um Tooltip permite.
- Foco Contextual: O Popover deve estar visualmente ancorado ao elemento que o originou (geralmente através de uma “seta” ou proximidade imediata).
- Interatividade: Pode conter botões de ação. Use Caixa de Título para os botões dentro do painel.
- Exemplo: Ver Detalhes, Confirmar.
- Vá Direto ao Ponto: Não use textos longos. Se a informação for extensa, forneça um link para a página completa.
- Certo: Status: Em trânsito (há 2h) em vez de “O veículo está em trânsito há aproximadamente duas horas”.
- Fechamento: Deve possuir um comportamento claro de saída (clicar fora ou um botão de fechar, se necessário).