Popover API (atributo popover)

Criar um menu, tooltip ou dropdown que flutua por cima de todo o resto da página sempre foi mais complicado do que parece: z-index brigando com outros elementos, posicionamento manual, fechar ao clicar fora, gerenciar foco para acessibilidade... A Popover API resolve boa parte disso com um único atributo HTML.

O jeito antigo

<button id="botao">Abrir menu</button>
<div id="menu" class="menu-escondido">Conteúdo do menu</div>

const botao = document.getElementById('botao');
const menu = document.getElementById('menu');

botao.addEventListener('click', () => menu.classList.toggle('menu-escondido'));

document.addEventListener('click', (e) => {
    if (!menu.contains(e.target) && e.target !== botao) {
        menu.classList.add('menu-escondido');
    }
});

Além do CSS pra esconder/mostrar, é preciso JavaScript pra alternar a visibilidade, fechar ao clicar fora e cuidar da camada de sobreposição (z-index) — tudo na mão.

Como funciona o atributo popover

Basta adicionar o atributo popover no elemento que deve flutuar, e ligá-lo a um botão com popovertarget:

<button popovertarget="menu">Abrir menu</button>

<div id="menu" popover>
    Conteúdo do menu
</div>

Pronto: o navegador cuida de exibir o elemento numa camada acima de tudo (o "top layer"), fechar ao clicar fora e até fechar com a tecla Esc — sem uma linha de JavaScript.

Controlando a ação do botão

É possível ser explícito sobre o que o botão deve fazer usando popovertargetaction:

<button popovertarget="menu" popovertargetaction="show">Abrir</button>
<button popovertarget="menu" popovertargetaction="hide">Fechar</button>

Popover manual (sem fechar ao clicar fora)

Por padrão (popover="auto"), o popover fecha ao clicar fora ou abrir outro popover. Para um comportamento mais parecido com um modal, que só fecha por ação explícita, use popover="manual":

<div id="aviso" popover="manual">
    Esse aviso só fecha se eu clicar no botão de fechar.
    <button popovertarget="aviso" popovertargetaction="hide">Fechar</button>
</div>

Estilizando com CSS

O elemento com popover pode ser estilizado normalmente, e existe até um pseudo-elemento próprio para o fundo escurecido:

#menu {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#menu::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

Quando usar

• Menus suspensos, tooltips e dicas de contexto.
• Notificações e avisos temporários (toasts).
• Painéis de configuração ou filtros que devem flutuar sobre o conteúdo.
• Combinado com CSS Anchor Positioning, dá pra posicionar o popover em relação a outro elemento sem JavaScript.

Compatibilidade

O suporte já é bom nos navegadores modernos, mas vale sempre conferir antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

caniuse

Conclusão

A Popover API elimina boa parte do JavaScript que hoje existe só para controlar visibilidade, camada e fechamento de elementos flutuantes, deixando esse comportamento comum a cargo do próprio navegador.