Aggiungi etichette Tooltip di immagini semplici con Taggd

Sai come Facebook ti consente etichetta facce nelle foto? Bene, Taggd è un po 'come l'equivalente CSS / JS usando i punti per notificare dove i tooltip dovrebbero apparire su un'immagine.

La biblioteca è completamente gratuita, e non richiede alcuna dipendenza come jQuery. esso funziona su JavaScript puro vaniglia, ed è super facile da configurare.

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

C'è anche un link al documentazione online usando Doclets, una piccola app web fatta apposta per la documentazione di JS. Puoi cerca le versioni di Taggd, o sfoglia la versione corrente nel ramo principale.

Da lì, otterrai un enorme lista di proprietà Puoi usare. Ogni documento è diviso per funzioni che operare sull'immagine (ad esempio Aggiungi Tag() o GetTag ()) seguito da funzioni che ti aiutano manipolare tag specifici (ad esempio setPosition ()).

Di nuovo, tutto gira su JavaScript vaniglia quindi non devi preoccuparti dei problemi di sintassi.

Per iniziare controlla il repository GitHub, e seguire le istruzioni di installazione.

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

Poi aggiungili a un'immagine, e presto! Sei pronto per partire.

mi piacerebbe vedere funzionalità extra per personalizzare le etichette dei tag, e cambiare la loro 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 è fatta 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 pagina principale dell'autore per codice di esempio e Collegamenti DL insieme a a 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.