Lisää Simple Image Tooltip -merkinnät Taggd n avulla

Tiedät, miten Facebook antaa sinulle etikettipinnat kuvissa? Hyvin, Taggd on kuin CSS / JS vastaava käyttämällä pisteitä notate missä työkaluvihjeiden pitäisi näkyä kuvassa.

Kirjasto on täysin ilmainen, ja ei vaadi riippuvuuksia kuten jQuery. Se toimii puhtaan vanilja-JavaScriptin avulla, ja se on erittäin helppo asentaa.

Voit oppia hieman Taggdin kotisivulta sisältää demon ja joitakin perusvaiheita aloittaa.

On myös linkki online-dokumentaatio käyttämällä Docletsia, joka on siisti pieni web-sovellus JS-dokumentaatiota varten. Sinä pystyt etsi Taggd-versioita, tai selaa nykyistä versiota päähaarassa.

Sieltä saat valtava luettelo ominaisuuksista voit käyttää. Jokainen doc on jaettu toimintojen mukaan toimivat kuvassa (kuten lisää tunniste() tai getTag ()), jota seuraavat toiminnot manipuloida tiettyjä tunnisteita (kuten setPosition ()).

Jälleen kaikki toimii vanilja JavaScript joten sinun ei tarvitse huolehtia syntaksikysymyksistä.

Aloita tutustu GitHub-repoon, ja noudata asennusohjeita.

Lisää vain Taggd CSS- ja JS-tiedostot omaan jakso , ja sitten luo uusi esimerkki Taggd-elementtejä. Nämä voidaan määritellä yksi kerrallaan tai joukossa.

Sitten liittää ne kuvaan, ja presto! Olet kaikki menossa.

Haluaisin nähdä lisäominaisuuksia tunnisteiden muokkaamiseen, ja muuttaa niiden muotoa. Olisi mahtavaa luoda neliömerkki, joka ympäröi objektia pienen vaaleanpunaisen pisteen sijasta. Mutta vapaan kirjaston ollessa nolla riippuvuus, en voi valittaa paljon.

Tähän mennessä tämä kirjasto on tehty vain nykyaikaisille selaimille, ja ei tue karkeaa hajoamista. Voit kuitenkin aina avata ongelman repo-sivulla tai yrittää ratkaista muita ongelmia, jos näet yksinkertaisia. Kuitenkin Taggd on edelleen hyppysellinen plugin, ja se on käytännöllistä käyttää mihin tahansa projektiin.

Tutustu tekijän kotisivulle näytekoodi ja DL-linkit yhdessä a linkki dokumentointisivulle.

Ja jos sinulla on kysyttävää tai ehdotuksia, voit vapaasti viestiä tekijälle Tim Severienille Twitteristä @TimSeverien.