Adicionar rótulos de dica de ferramenta de imagem simples com o Taggd

Você sabe como o Facebook permite rostos de etiquetas nas fotos? Bem, Taggd é um pouco como o equivalente CSS / JS usando pontos para anotar onde as dicas de ferramentas devem aparecer em uma imagem.

A biblioteca é totalmente gratuita e não requer dependências como jQuery. isto funciona em JavaScript baunilha puro, e é super fácil de configurar.

Você pode aprender um pouco mais na página inicial do Taggd, que inclui uma demonstração e alguns passos básicos para começar.

Há também um link para o documentação online usando Doclets, um pequeno aplicativo web feito para a documentação do JS. Você pode pesquisar versões do Taggd, ou navegue na versão atual no ramo mestre.

De lá, você terá um lista enorme de propriedades você pode usar. Cada doc é dividido por funções que operar na imagem (tal como adicionar etiqueta() ou getTag ()) seguido de funções que ajudam você manipular tags específicas (tal como setPosition ()).

Mais uma vez, tudo funciona em JavaScript vanilla então você não precisa se preocupar com problemas de sintaxe.

Para começar confira o repositório do GitHub, e siga as instruções de configuração.

Você acabou de adicionar os arquivos CSS e JS do Taggd dentro de voce seção , e depois crie uma nova instância dos elementos do Taggd. Estes podem ser definidos um por um ou em uma matriz.

Então anexe-os a uma imagem, e pronto! Você está pronto para ir.

Eu adoraria ver recursos extras para personalizar os rótulos das tags, e mude sua forma. Seria incrível criar uma tag quadrada para cercar um objeto em vez de um pequeno ponto rosa. Mas para uma biblioteca livre com dependências zero, não posso reclamar muito.

Até agora esta biblioteca é feita somente para navegadores modernos, e não suporta degradação graciosa. No entanto, pode sempre abrir um problema na página de repo ou tentar resolver outros problemas, se vir algum problema simples. No entanto, o Taggd ainda é um plug-in, e é prático para qualquer projeto.

Confira a home page do autor para Código de amostra e Links DL junto com um link para a página de documentação.

E se você tiver dúvidas ou sugestões, não hesite em enviar uma mensagem ao criador Tim Severien em seu Twitter @TimSeverien.