Esta página foi traduzida pela API Cloud Translation.

Popover = dica

Keith Cirkel

Mason Freed

Publicado em 26 de fevereiro de 2025

O Chrome 133 se baseia no recurso de pop-up atual e introduz um novo modo: popover="hint". Esse modo gerenciado pelo navegador ativa um novo contexto de empilhamento que simplifica a criação de dicas de ferramentas e elementos flutuantes voláteis semelhantes. Ele reduz o esforço do desenvolvedor, mantendo a flexibilidade do design.

Introdução e histórico

A API Popover, introduzida no Chrome 114, permite criar uma interface flutuante acessível, como menus e dicas de ferramentas. Por padrão, popover="auto" processa a funcionalidade de dispensa leve e o gerenciamento de foco para você, sem a necessidade de outros scripts, conforme abordado em Introdução à API Popover. Ao abrir um pop-up popover="auto", todos os outros pop-ups não ancestrais com popover="auto" serão fechados, o que cria uma API ergonômica que faz a coisa mais sensata.

Pop-ups que fecham outros pop-ups

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

Neste exemplo, abrir o popover 2 fecha o popover 1, já que popover="auto" só permite que um popover seja aberto por vez.

Embora esse comportamento funcione bem para menus e caixas de diálogo, ele pode criar problemas quando vários tipos de interface flutuante precisam coexistir. Por exemplo, um menu e uma dica de ferramentas que usam popover="auto" podem entrar em conflito, em que abrir a dica de ferramentas fecha o menu. Essa pode parecer uma situação incomum, mas ela aparece muito em uma interface moderna de estilo de aplicativo. Por exemplo, os menus no cabeçalho do github.com usam popovers para os menus e as dicas, permitindo que ambos fiquem visíveis ao mesmo tempo sob determinadas condições:

Uma maneira de resolver isso é usar popover="manual" para os elementos de dica, o que permite o controle total do pop-up com scripts. No entanto, isso requer a reimplementação do comportamento de empilhamento, da dispensa leve e do gerenciamento de foco, que são exatamente as tarefas que a API Popover foi projetada para processar. Isso nos levou a buscar maneiras de estender a API para fornecer essa funcionalidade ausente.

Com base na pesquisa com desenvolvedores, identificamos dois contextos de empilhamento comuns:

Interface persistente: por exemplo, menus e caixas de diálogo.
Interface temporária: por exemplo, cartões de rolagem e dicas.

Para acomodar os dois, o popover="hint" introduz uma segunda pilha, diferente de popover="auto", garantindo que os menus permaneçam abertos mesmo quando as dicas aparecem. Em vez de introduzir vários contextos de empilhamento para diferentes tipos de interface, o que essencialmente reinventaria o z-index, essa abordagem simplifica as coisas ao definir apenas duas categorias amplas: interface persistente (auto) e interface efêmera (hint). Isso equilibra a flexibilidade e evita que os mesmos problemas que você enfrentou antes de usar o popover voltem a aparecer.

Comportamento do novo valor

Tanto popover="auto" quanto popover="hint" oferecem suporte à exclusão leve, ou seja, eles são fechados automaticamente quando o usuário clica fora deles ou pressiona Esc no teclado. Nesse sentido, os dois estilos são idênticos.

Quando se trata de forçar o ocultamento de outros pop-ups, o popover="auto" fecha todos os outros pop-ups auto e hint quando abertos, garantindo que apenas um pop-up esteja ativo por vez (a única exceção são os pop-ups aninhados, explicados abaixo). popover="hint", por outro lado, só oculta outros popovers hint, permitindo que menus e dicas permaneçam abertos e coexistam.

A principal diferença entre eles é o comportamento de aninhamento. popover="auto" oferece suporte ao aninhamento, permitindo que um pop-up filho permaneça aberto em outro principal. O popover="hint" tem um comportamento de aninhamento especial, que é onde as "pilhas" separadas entram. Quando um pop-up hint está dentro de um pop-up auto, ele se junta à pilha auto para manter o agrupamento contextual. Isso significa que ele vai permanecer aberto até que outros pop-ups auto ou hint o forcem a se ocultar. Isso oferece um comportamento intuitivo, em que as dicas não interrompem outros menus ou popovers.

Por fim, para casos de uso muito diferentes, sempre há popover="manual", que não vem com nenhum desses comportamentos integrados, permitindo que você defina a funcionalidade e o comportamento exatos necessários.

	`popover="auto"`	`popover="hint"`	`popover="manual"`
Descartar a luz	Sim	Sim	Não
Ocultar à força:	`auto`s e `hint`s não relacionados	`hint`s não relacionados	Nothing
Aninhamento:	Sim	Especial (descrito anteriormente)	N/A: não há luz de dispensa

Acionamento por passar o cursor

Um padrão comum de UX é que as dicas e os cartões de informações sejam acionados por passar o cursor. Passar o cursor do mouse sobre um elemento de interesse por um período de tempo faz com que o card de informações seja mostrado. Atualmente, esse comportamento precisa ser implementado pelo JavaScript, por exemplo, adicionando listeners para os eventos mouseenter e mouseleave. No entanto, outra API está em desenvolvimento e deve tornar o acionamento do passar do cursor declarativo: a API Interest Invokers.

Essa API ainda está em desenvolvimento, mas a ideia geral é adicionar um atributo chamado interesttarget a muitos tipos de elementos, o que confere comportamento de acionamento do cursor neles:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

Com o HTML anterior, passar o cursor sobre o link <a> mostra automaticamente o popover my-hovercard. Mover o ponteiro para fora desse elemento oculta o pop-up. Tudo isso sem JavaScript.

Exemplos

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

Este exemplo usa popover="hint" para criar uma dica básica, que fornece mais informações sobre o botão quando ele é destacado com o mouse. A ativação do cursor é fornecida por manipuladores de eventos para mouseenter e mouseleave com atrasos simples de 0,5 segundo. Alguns detalhes não são tratados neste exemplo:

Passar o cursor sobre o popover não impede que o elemento acionado feche o popover. Portanto, não é possível copiar ou colar texto do popover, por exemplo.
Não há "debouncing": passar o cursor sobre o botão por uma pequena fração de segundo é suficiente para acionar o popover, mesmo que o cursor seja rapidamente removido antes que o tempo de atraso expire. Nesse caso, a dica "tremece" quando é aberta e fechada rapidamente.
O exemplo não é acessível: qualquer usuário que não esteja usando um mouse não pode acessar o conteúdo da dica.

Essas falhas podem ser corrigidas com JavaScript adicional. Por exemplo, focus (ou talvez os manipuladores de eventos keydown e keyup)) precisam ser adicionados para oferecer suporte à ativação do pop-up com o teclado. Para uma explicação sobre o que precisa ser processado corretamente para garantir que a dica esteja acessível, consulte esta ótima postagem do blog da Sarah Higley. Todos esses problemas (e mais) serão tratados automaticamente de forma declarativa pela API Interest Invokers.

Saiba mais

Consulte o explicativo do recurso ou a especificação de HTML para mais detalhes.