Crie bolhas de fala on-page com o Popper.js

Todo mundo sabe sobre dicas de ferramentas e existem dezenas de recursos gratuitos para ajudá-lo a criá-los. Contudo, bolhas de mensagens personalizadas ou “poppers” também são muito úteis.

Eles não se limitam a eventos de focalização, para que eles possam aparecer na página de forma consistente e trabalhar em torno de outros comportamentos do usuário.

Se você está procurando criar esses poppers da bolha do discurso no seu site, então Popper.js é a melhor escolha. É um plugin gratuito de código aberto, hospedado no site oficial js.org.

Você encontrará essas dicas em muitos sites que possuem interfaces complexas. Às vezes eles oferecem dicas rápidas, instruções passo a passo, e conselho de integração para pessoas novas na interface.

Com o Popper.js, você não precisa esperar que o usuário passe o mouse apenas para criar uma dica de ferramenta. Em vez disso, você pode forçar um popper a aparecem em qualquer lugar, qualquer tamanho, qualquer cor, com posicionamento dinâmico.

Confira a página de demonstração do Popper.js para ver o que quero dizer. Vem com um grande variedade de recursos de posicionamento que permitem virar automaticamente a posição do popper com base na localização da tela.

Conforme o usuário rola a página, eles podem perder a bolha popper. Com este plugin, você pode forçá-lo de volta à vista virando-o para cima (ou para baixo), dependendo da direção de rolagem do usuário.

Você tem controle total sobre os limites, as posições das setas, as cores da dica de ferramenta e muito mais. Sem mencionar que este plugin é lindo e totalmente extensível Se você quiser adicionar seus próprios recursos no mix.

Todo o código-fonte está disponível gratuitamente no GitHub se você quiser conferir.

Para começar, dê uma olhada no página de documentação para um guia completo. Isso informa quais scripts você precisará, como configurar um popper personalizado e como configurar as diferentes opções de viewport. Embora o melhor recurso seja o Página principal Popper.js, com demos abundância e abundância de amostras de código.

Se você quiser ler mais sobre desenvolvimento, confira este post no blog escrito pelo criador Federico Zivolo.