Legg til Simple Image Tooltip-etiketter med Taggd

Du vet hvordan Facebook lar deg etikettsider på bilder? Vi vil, Taggd er ganske som CSS / JS-ekvivalenten bruker prikker å notere hvor verktøytips skal vises på et bilde.

Biblioteket er helt gratis, og krever ikke noen avhengighet for eksempel jQuery. Den kjører på ren vanilje JavaScript, og det er veldig enkelt å sette opp.

Du kan lære litt mer fra Taggd-hjemmesiden som inneholder en demo og noen grunnleggende trinn for å komme i gang.

Det er også en link til online dokumentasjon bruker Doclets, en fin liten webapp laget for JS dokumentasjon. Du kan søk Taggd versjoner, eller bla gjennom gjeldende versjon i hovedgrenen.

Derfra får du en stor liste over eiendommer du kan bruke. Hver doc er delt av funksjoner som operere på bildet (som for eksempel Legg til tag() eller getTag ()) etterfulgt av funksjoner som hjelper deg manipulere bestemte koder (som for eksempel setPosition ()).

Igjen alt kjører på vanilje JavaScript så du trenger ikke å bekymre deg for syntaksproblemer.

For å komme i gang sjekk ut GitHub repo, og følg oppsettens retninger.

Du legger bare til Taggd CSS og JS-filene inn i din seksjon , og så opprett en ny forekomst av taggd-elementene. Disse kan defineres en etter en eller i en matrise.

Deretter legg dem til et bilde, og presto! Du er klar til å gå.

Jeg hadde likt å se ekstra funksjoner for å tilpasse taggen etikettene, og endre form. Det ville være fantastisk å lage en firkantet kode for å omgjøre et objekt i stedet for en liten rosa prikk. Men for et gratis bibliotek med null avhengigheter, kan jeg ikke klage mye.

Så langt er dette biblioteket gjort kun for moderne nettlesere, og støtter ikke grasiøs nedbrytning. Men du kan alltid åpne et problem på repo siden eller prøve å løse andre problemer hvis du ser noen enkle. Ikke desto mindre er Taggd fortsatt et pluss, og det er praktisk å bruke for ethvert prosjekt.

Sjekk ut forfatterens hjemmeside for prøvekode og DL-koblinger sammen med a lenke til dokumentasjonssiden.

Og hvis du har noen spørsmål eller forslag, vennligst send beskjed til skaperen Tim Severien på Twitter @TimSeverien.