Nas páginas de listagem de perguntas do meu produto, Front Prep, exibo logotipos de empresas ao lado das perguntas de entrevista. Quando você passa o mouse sobre um logotipo, um tooltip mostra o nome da empresa. Eu tinha definido o atraso do tooltip para 0, então os tooltips apareciam instantaneamente enquanto eu movia o cursor pela página.
Para corrigir isso, adicionei um atraso de transição de 200ms, mas isso criou um novo problema: mover entre vários logotipos significava esperar o mesmo atraso de 200ms a cada vez, o que parecia lento. Este post é sobre um pequeno padrão de interação encontrado em barras de ferramentas de navegadores e sites. Minha solução se divide em três partes: passar o mouse sobre um logotipo, o tooltip espera 200ms antes de abrir.
Quando um tooltip fecha, um temporizador de 300ms começa, que chamo de janela quente. Se você passar o mouse sobre outro logotipo enquanto este temporizador estiver ativo, o tooltip abre instantaneamente, pulando o atraso. Quando o temporizador expira, a página fica fria e a espera de 200ms retorna.
No Front Prep, meus tooltips são construídos com Radix e Motion. O código usa uma variável de contexto para rastrear o estado isWarm entre componentes. Ao passar o mouse, o componente verifica se a página está quente; se sim, o tooltip abre instantaneamente; caso contrário, inicia um temporizador de 200ms.
A função show copia o estado quente para um flag instantâneo, que o CSS usa para pular a animação de entrada via atributo de dados. Este padrão melhora a experiência do usuário, evitando popups instantâneos e atrasos lentos. É uma abordagem simples que você pode implementar em seu próprio código. Entidades-chave: Empresas: Front Prep.
Fonte: Hacker News · Resumido por HeadlinesBriefing