Popover vs. Tooltip
Uma tooltip dá uma dica curta. Um popover pode guardar mais textos, escolhas ou botões.
Use uma tooltip quando algumas palavras forem suficientes. Use um popover quando a pessoa precisar ler ou fazer mais sem sair da página.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Popover
Um popover é um pequeno painel ligado ao controle que o abriu. Ele pode ter conteúdo organizado e ações sem bloquear a página.
popover attribute / PopoverSelecione um avatar para abrir um pequeno perfil. Mostra o cargo da pessoa, detalhes de contato e uma ação Seguir.
- Use-o quando
- Use-o quando o conteúdo pertence ao lado do seu gatilho e as pessoas podem continuar usando a página.
- Não o use quando
- Nunca use para uma dica curta apenas com rótulo. Use um tooltip em vez disso.
- Nome usado no código
popover attribute / Popover
Dica de ferramenta
Uma tooltip é uma nota curta sobre um controle. Ela abre quando o mouse passa por cima ou o teclado foca no controle. As pessoas não podem usá-la como um botão.
role="tooltip"Quando um botão de ícone recebe foco do teclado, “Copiar link” aparece. O foco permanece no botão.
- Use-o quando
- Use-o para explicar um rótulo de controle curto tanto ao passar o mouse quanto ao focar com o teclado.
- Não o use quando
- Nunca coloque ações, instruções obrigatórias ou conteúdo longo dentro de uma dica de ferramenta.
- Nome usado no código
role="tooltip"
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| PopoverPopover | Use-o quando o conteúdo pertence ao lado do seu gatilho e as pessoas podem continuar usando a página. | Nunca use para uma dica curta apenas com rótulo. Use um tooltip em vez disso. | popover attribute / Popover |
| Dica de ferramentaTooltip | Use-o para explicar um rótulo de controle curto tanto ao passar o mouse quanto ao focar com o teclado. | Nunca coloque ações, instruções obrigatórias ou conteúdo longo dentro de uma dica de ferramenta. | role="tooltip" |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Popover (Popover), Dica de ferramenta (Tooltip) para o nosso fluxo real de usuário. Use esta regra: Uma tooltip dá uma dica curta. Um popover pode guardar mais textos, escolhas ou botões. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.