As dicas de ferramentas parecem o menor problema de interface do usuário que você pode ter. Eles são minúsculos e geralmente escondidos. Quando alguém pergunta como construir um, a resposta tradicional quase sempre volta usando alguma biblioteca JavaScript. E por muito tempo esse foi o conselho sensato. Eu também acompanhei. Superficialmente, uma dica de ferramenta é simples. Passe o mouse ou foque em um elemento, mostre uma pequena caixa com algum texto e oculte-a quando o usuário se afastar. Mas depois que você envia um para usuários reais, as vantagens começam a aparecer. Usuários de teclado Tab no gatilho, mas nunca veem a dica de ferramenta. Os leitores de tela anunciam isso duas vezes ou nem anunciam. A dica de ferramenta pisca quando você move o mouse muito rapidamente. Ele sobrepõe o conteúdo em telas menores. Pressionar Esc não o fecha. O foco se perde. Com o tempo, meu código de dica se tornou algo que eu realmente não queria mais possuir. Os ouvintes do evento se amontoaram. O foco e o foco tiveram que ser tratados separadamente. Cliques externos precisavam de casos especiais. Os atributos ARIA precisavam ser mantidos sincronizados manualmente. Cada pequena correção adicionou outra camada de lógica. As bibliotecas ajudaram, mas também eram mais como caixas pretas com as quais eu trabalhava, em vez de entender completamente o que estava acontecendo nos bastidores. Foi isso que me levou a olhar para a API Popover mais recente. Eu queria ver o que aconteceria se eu reconstruísse uma única dica de ferramenta usando o modelo nativo do navegador sem a ajuda de uma biblioteca. Ao começarmos, é importante notar que, como acontece com qualquer novo recurso, há algumas coisas que ainda estão sendo resolvidas. Dito isto, atualmente ele desfruta de excelente suporte ao navegador, embora existam várias partes da API geral que estão em evolução. Enquanto isso, vale a pena ficar de olho em Caniuse. A dica “antiga” Antes da API Popover, usar uma biblioteca de dicas de ferramentas não era um atalho. Foi o padrão. Os navegadores não tinham um conceito nativo de dica de ferramenta que funcionasse com mouse, teclado e tecnologia assistiva. Se você se importava com a correção, sua única opção era usar uma biblioteca, e foi exatamente isso que eu fiz. Em um nível superior, o padrão era sempre o mesmo: um elemento de gatilho, um elemento de dica de ferramenta oculto e JavaScript para coordenar os dois.
A biblioteca cuidou da fiação que permitiu que o elemento fosse exibido ao passar o mouse ou focar, ocultar ao desfocar ou sair do mouse e reposicionar/redimensionar ao rolar.
Com o tempo, a dica de ferramenta pode ficar frágil. Pequenas mudanças traziam riscos. Pequenas correções causaram regressões. Pior ainda, adicionar novas dicas de ferramentas herdou a mesma complexidade. As coisas funcionaram tecnicamente, mas nunca pareceram resolvidas ou completas. Esse era o estado das coisas quando decidi reconstruir a dica de ferramenta usando a API Popover nativa do navegador. O momento em que experimentei a API Popover Não mudei para a API Popover porque queria experimentar algo novo. Troquei porque estava cansado de manter o comportamento das dicas de ferramentas que acreditava que o navegador já deveria ter entendido. Eu estava cético no início. A maioria das novas APIs da web promete simplicidade, mas ainda exige cola, tratamento de casos extremos ou lógica substituta que recria silenciosamente a mesma complexidade da qual você estava tentando escapar. Então, experimentei a API Popover da menor maneira possível. Aqui está o que parecia:
1. O teclado “simplesmente funciona” O suporte ao teclado dependia do alinhamento correto de múltiplas camadas: o foco tinha que acionar a dica de ferramenta, o desfoque tinha que ocultá-la, o Esc tinha que ser conectado manualmente e o tempo era importante. Se você perdesse um caso extremo, a dica de ferramenta permaneceria aberta por muito tempo ou desapareceria antes que pudesse ser lida. Com o atributo popover definido como automático ou manual, o navegador assume o básico: Tab e Shift+Tab se comportam normalmente, Esc fecha a dica de ferramenta todas as vezes e nenhum ouvinte extra é necessário.
O que desapareceu da minha base de código foram os manipuladores globais de teclas, a lógica de limpeza específica do Esc e as verificações de estado durante a navegação pelo teclado. A experiência do teclado deixou de ser algo que eu precisava manter e passou a ser uma garantia do navegador. 2. Previsibilidade do leitor de tela Este foi omaior melhoria. Mesmo com um trabalho cuidadoso do ARIA, o comportamento variou, conforme descrevi anteriormente. Cada pequena mudança parecia arriscada. Usar um popover com uma função adequada parece muito mais estável e previsível no que diz respeito ao que vai acontecer:
E aqui está outra vitória: após a mudança, o Lighthouse parou de sinalizar avisos de estado ARIA incorretos para a interação, principalmente porque não há mais estados ARIA personalizados para eu errar acidentalmente.
3. Gerenciamento de foco O foco costumava ser frágil. Antes, eu tinha regras como: deixar o gatilho de foco mostrar a dica de ferramenta, mover o foco para a dica de ferramenta e não fechar, disparar o desfoque quando estiver muito próximo e fechar a dica de ferramenta e restaurar o foco manualmente. Isso funcionou até que não funcionou. Com a API Popover, o navegador impõe um modelo mais simples onde o foco pode passar mais naturalmente para o popover. Fechar o popover retorna o foco ao gatilho e não há armadilhas de foco invisíveis ou momentos de perda de foco. E não adicionei código de restauração de foco; Eu o removi.
Conclusão A API Popover significa que as dicas de ferramentas não são mais algo que você simula. Eles são algo que o navegador entende. A abertura, o fechamento, o comportamento do teclado, o manuseio do Escape e uma grande parte da acessibilidade agora vêm da própria plataforma, não do JavaScript ad-hoc. Isso não significa que as bibliotecas de dicas de ferramentas sejam obsoletas porque ainda fazem sentido para sistemas de design complexos, personalização pesada ou restrições legadas, mas o padrão mudou. Pela primeira vez, a dica mais simples também pode ser a mais correta. Se você estiver curioso, experimente este experimento: simplesmente substitua apenas uma dica de ferramenta em seu produto pela API Popover, não reescreva tudo, não migre um sistema inteiro, apenas escolha uma e veja o que desaparece do seu código. Quando a plataforma oferece um primitivo melhor, a vitória não é apenas menos linhas de JavaScript, mas também menos coisas com as quais você precisa se preocupar. Confira o código-fonte completo em meu repositório GitHub. Leitura adicional Para se aprofundar em popovers e APIs relacionadas:
“Poppin' In”, Geoff Graham “Esclarecendo a relação entre popovers e diálogos”, Zell Liew “O que é popover = dica?”, Una Kravets “Comandos do Invocador”, Daniel Schwarz “Criando uma notificação de fechamento automático com um popover HTML”, Preethi Explicador da API Open UI Popover “Estourar (sobre) os balões”, John Rhea “Posicionamento de âncora CSS”, Juan Diego Rodríguez
MDN também oferece documentação técnica abrangente para a API Popover.
