Tippy.js - Biblioteca Lightweight Vanilla Javascript Tooltip

As dicas de ferramentas são úteis para mostrar pequenos pedaços de conteúdo extra. Eles economizam espaço na página e dão a você um espaço para animar algo que chama a atenção das pessoas.

No passado, abordamos os scripts de dica de ferramenta, mas muitos desenvolvedores desejam bibliotecas personalizadas. Alguns preferem jQuery, outros querem simples baunilha JS.

O plugin Tippy funciona melhor para o último grupo quem quer trabalhar com baunilha código JS.

Com Tippy.js você recebe um biblioteca de dica de ferramenta em pleno funcionamento executando em cima do Popper.js. Isso significa que o plugin vem com uma pequena dependência, mas é muito mais fácil de gerenciar do que a biblioteca jQuery..

Então, qual é a beleza do Tippy? Ele adiciona aos estilos Popper padrão para criar dicas de ferramentas mais dinâmicas com efeitos incríveis.

Você pode adicionar desvanecimentos, slides, manobras, durações personalizadas, métodos de retorno de chamada e até mesmo efeitos dinâmicos, como dicas de ferramenta de rotação automática.

Realmente este plugin levará suas dicas para um nível totalmente novo com recursos de usabilidade bem definidos. Você pode manter Dicas de ferramentas fixadas na tela com determinados elementos da página, ou altere a orientação se a tela ficar muito pequena.

Ele também suporta dispositivos de toque, o que o torna perfeito para layouts responsivos. O HTML da dica de ferramenta é rotulado usando os padrões ARIA para acessibilidade máxima. Eu não consigo pensar em nada de ruim para dizer sobre este plugin!

Se você quiser tentar isso em seu próprio site, baixe uma cópia do código-fonte do GitHub. Isso inclui os principais arquivos do plug-in, juntamente com detalhes sobre como instalá-lo usando o npm.

O arquivo de script padrão do Tippy.js vem com o Popper.js incluído, portanto você não precisa nem fazer o download dessa biblioteca extra. Tudo o que você precisa é o arquivo JS / CSS padrão e uma página da Web para executar as dicas de ferramentas.

Se você quiser aprofundar alguns exemplos, dê uma olhada na homepage do Tippy.js, que inclui amostras ao vivo + trechos de código que você pode copiar e reutilizar..