C17 · Componentes
Popover
Janela flutuante acionada por interação para informação contextual ou ações rápidas. Elevação E2. Fechamento por clique fora ou Escape.
Quando usar
| Caso | Recomendação |
|---|---|
| Ação rápida (filtros) | Popover. |
| Informação adicional curta | Tooltip (C18). |
| Formulário com 3+ campos | Dialog (C10) ou Sheet (C20). |
| Lista de ações | Dropdown Menu (C19). |
Estrutura
<button aria-expanded="false" aria-controls="pop1"> Filtros </button> <div id="pop1" role="dialog" hidden> <h3>Filtrar drops</h3> ... </div>
Diretrizes
- Posição: prefira abaixo do trigger (8px de offset).
- Largura máxima 320px — popover não é container de página.
- Sempre tem trigger explícito (botão ou ícone).
- Foco transfere para o popover ao abrir; volta ao trigger ao fechar.