Tooltip e Popover: o que é e quando usar cada componente?
Escrito por Adria Meira e Vivian Notrispe
Revisão de Design por Mateus Da Silva
Em um produto SaaS, é comum prover informações situacionais para os usuários de forma a facilitar o fluxo de tarefas. As probabilidades disso acontecer aumentam ainda mais quando você trabalha com um painel dashboard, em que há um apanhado de métricas à disposição. Diante disso, nós nos perguntamos: qual o melhor componente para mostrar esse tipo de informação, tooltip ou popover? Qual a diferença entre os dois?
A resposta é… depende. É importante lembrar que há diversos Design Systems, cada qual com suas guidelines e nomenclaturas. Nesse sentido, não há muito certo ou errado, dado que a documentação pode variar conforme o contexto. No entanto, é crucial que dentro do seu time e da sua empresa, todos falem a mesma língua (ou, nesse caso, nomenclatura).
A tooltip é um componente que, ao ser disparado, exibe um texto sintético e informativo sobre um elemento, sem informações ricas como botões e imagens. A tooltip é acionada pelo usuário por meio do hover ou de um toque seguido de um press no elemento, quando em desktop e em mobile, respectivamente. Justamente por essa característica situacional, uma boa prática da tooltip é prover somente informações complementares, e não aquelas que são essenciais para a realização de tarefas . Ainda, a tooltip pode ser disparada tanto em elementos interativos (como botões e links) como em não-interativos (ícones, texto abreiado, entre outros).
Em relação ao design do componente em si, é importante que o contêiner da tooltip não seja personalizado, mas sim completamente opaco e sem sombras, para que seu texto permaneça legível. O texto, aliás, deve sempre começar com a inicial maiúscula, contendo o mínimo de pontuação possível — o ponto final, por exemplo, é dispensável.
Por outro lado, uma popover é uma janela ou caixa de diálogo temporária que é acionada quando um usuário clica em um botão, ícone ou outra área definida. A popover exibe um conteúdo em cima de outro e, ao contrário da tooltip, a popover não precisa ser breve — ao contrário, pode conter uma série de informações, inclusive elementos acionáveis.
A popover pode ser dividida em dois tipos:
Popover não modal (ou simplesmente popover)
Não bloqueia a interface, permitindo que, mesmo quando acionada, o usuário continue a interagir com os demais elementos da página. No Design System do Atlassian, este componente pode ser encontrado como Inline dialog.
Popover modal (ou modal)
Possui sobreposição de bloqueio, impedindo que o usuário interaja com os demais elementos da página enquanto estiver acionada. Ela pode ser dispensada por meio de um botão (concluir ou cancelar, por exemplo) ou ícone (cancel, close). Neste caso, o componente pode ser chamado de dialog, como visto no Material Design, Modal dialog (Atlassian) e outros.
Pensando em acessibilidade, uma boa prática é, sempre que possível, optar por botões com texto em vez de ícones, pois o texto explicita a ação que acontecerá quando o usuário clicar.
Vale lembrar que as informações dentro do tooltip ou popover devem ser adicionais e informativas. Uma boa abordagem para a tooltip, inclusive, é presumir que ela nunca será lida. Levando isso em consideração, caso a informação seja crucial para a conclusão da tarefa do seu usuário ela deve estar disposta na tela a todo momento.
Essas são apenas algumas notas sobre os componentes complexos utilizados no dia a dia de Design da Cobli. Esperamos que este texto possa te ajudar na aplicação da tooltip e da popover e pedimos que entre em contato caso tenha dúvidas, críticas ou sugestões. Toda contribuição faz o Universo do Design System avançar. Até a próxima!
Referências
Tooltip Guidelines by Norman Nielsen
Tooltips by Material Design
Popovers by Apple Developer
Popover | Pajamas Design System
Pop-up, popover, or popper? — a quick look into UI terms
