Aggiungi etichette Tooltip di immagini semplici con Taggd

Sai come Facebook ti consente di etichettare i volti nelle foto? Bene, Taggd è un po 'come l'equivalente CSS / JS che usa i punti per annotare dove dovrebbero apparire le descrizioni dei comandi su un'immagine.

La libreria è completamente gratuita e non richiede alcuna dipendenza come jQuery. Funziona con JavaScript puro vaniglia ed è semplicissimo da configurare.

Puoi imparare un po 'di più dalla home page di Taggd che include una demo e alcuni passaggi fondamentali per iniziare.

C'è anche un collegamento alla documentazione online che utilizza Doclets, una piccola e semplice app web creata per la documentazione di JS. Puoi cercare le versioni di Taggd o sfogliare la versione corrente nel ramo principale.

Da lì, riceverai un enorme elenco di proprietà che puoi utilizzare. Ogni documento è suddiviso da funzioni che operano sull'immagine (come addTag() o getTag() ) seguite da funzioni che aiutano a manipolare tag specifici (come setPosition() ).

Ancora una volta, tutto gira su JavaScript vaniglia quindi non devi preoccuparti dei problemi di sintassi.

Per iniziare controlla il repository GitHub e segui le istruzioni di configurazione.

Devi solo aggiungere i file Taggd CSS e JS al tuo sezione, quindi creare una nuova istanza degli elementi Taggd. Questi possono essere definiti uno per uno o in un array .

Quindi aggiungili ad un'immagine, e presto! Sei pronto per partire.

Mi piacerebbe vedere funzionalità extra per personalizzare le etichette dei tag e cambiarne la forma. Sarebbe fantastico creare un tag quadrato per circondare un oggetto piuttosto che un piccolo punto rosa. Ma per una libreria libera con zero dipendenze, non posso lamentarmi molto.

Finora questa libreria è stata creata solo per i browser moderni e non supporta il degrado aggraziato. Tuttavia, puoi sempre aprire un problema nella pagina dei pronti contro termine o provare a risolvere altri problemi se ne vedi di semplici. Tuttavia, Taggd è ancora un diavolo di plugin ed è pratico da usare per qualsiasi progetto.

Controlla la home page dell'autore per codice di esempio e collegamenti DL insieme a un link alla pagina di documentazione .

E se avete domande o suggerimenti sentitevi liberi di inviare un messaggio al creatore Tim Severien sul suo Twitter @TimSeverien.