Tilføj Simple Image Tooltip Etiketter med Taggd

Du ved, hvordan Facebook giver dig det etiketflader i billeder? Godt, Taggd er lidt som CSS / JS ækvivalenten ved hjælp af prikker at notere hvor værktøjstips skal vises på et billede.

Biblioteket er helt gratis, og kræver ikke nogen afhængighed som jQuery. Det kører på ren vanilla JavaScript, og det er super nemt at konfigurere.

Du kan lære lidt mere fra Taggd hjemmesiden som indeholder en demo og nogle grundlæggende trin for at komme i gang.

Der er også et link til online dokumentation ved hjælp af Doclets, en pæn lille web app lavet til JS dokumentation. Du kan søg Taggd versioner, eller Gennemse den aktuelle version i masterafdelingen.

Derfra får du en kæmpe liste over ejendomme du kan bruge. Hver doc er delt af funktioner som operere på billedet (såsom addTag () eller getTag ()) efterfulgt af funktioner, der hjælper dig manipulere specifikke tags (såsom setPosition ()).

Igen alt kører på vanilla JavaScript så du behøver ikke bekymre sig om syntax problemer.

At komme i gang tjek GitHub repo, og følg installationsvejledningen.

Du tilføjer blot Taggd CSS og JS-filerne ind i din afsnit , og så opret en ny instans af taggd-elementerne. Disse kan defineres en efter en eller i en matrix.

Derefter tilføj dem til et billede, og presto! Du er klar til at gå.

Jeg ville elske at se ekstra funktioner til at tilpasse tag etiketter, og ændre deres form. Det ville være fantastisk at oprette et firkantet tag, der omgiver et objekt snarere end en lille lyserød prik. Men for et gratis bibliotek med nul afhængigheder, kan jeg ikke klage meget.

Indtil videre er dette bibliotek lavet kun for moderne browsere, og understøtter ikke graceful nedbrydning. Du kan dog altid åbne et problem på repo-siden eller forsøge at løse andre problemer, hvis du ser nogle enkle. Ikke desto mindre er Taggd stadig en hel del af et plugin, og det er praktisk at bruge til ethvert projekt.

Tjek på forfatterens hjemmeside for prøvekode og DL links sammen med a Link til dokumentationssiden.

Og hvis du har spørgsmål eller forslag, er du velkommen til at sende besked til skaberen Tim Severien på hans Twitter @ TimSeverien.