Lägg till Simple Image Tooltip-etiketter med Taggd

Du vet hur Facebook låter dig etikettsytor på bilder? Väl, Taggd är ungefär som CSS / JS ekvivalent använda punkter för att notera där verktygstips ska visas på en bild.

Biblioteket är helt gratis, och kräver inga beroenden som jQuery. Det körs på ren vanilj JavaScript, och det är super lätt att installera.

Du kan lära dig lite mer från Taggds hemsida som innehåller en demo och några grundläggande steg för att komma igång.

Det finns också en länk till online dokumentation använder Doclets, en snygg liten webapp gjord för JS dokumentation. Du kan sök taggd versioner, eller bläddra i den aktuella versionen i huvudgrenen.

Därifrån får du en stor lista över egenskaper du kan använda. Varje doc delas av funktioner som fungera på bilden (som Lägg till tagg() eller getTag ()) följt av funktioner som hjälper dig manipulera specifika taggar (som setPosition ()).

Återigen allt körs på vanilj JavaScript så du behöver inte oroa dig för syntaxproblem.

För att starta kolla in GitHub repo, och följ installationsanvisningarna.

Du lägger bara till Taggd CSS och JS-filer in i din sektion , och då skapa en ny instans av taggd-elementen. Dessa kan definieras en och en eller i en array.

Sedan lägg dem till en bild, och presto! Du är redo att gå.

jag skulle älska att se extra funktioner för att anpassa taggen etiketter, och ändra sin form. Det skulle vara fantastiskt att skapa en fyrkantig tagg för att omge ett objekt snarare än en liten rosa punkt. Men för ett gratis bibliotek med nollberoende kan jag inte klaga mycket.

Hittills har detta bibliotek gjorts endast för moderna webbläsare, och stöder inte graciös nedbrytning. Men du kan alltid öppna ett problem på repo sidan eller försöka lösa andra problem om du ser några enkla. Ändå är Taggd fortfarande ett komplett plugin, och det är praktiskt att använda för något projekt.

Kolla in författarens hemsida för Provkod och DL länkar tillsammans med a länk till dokumentationssidan.

Och om du har några frågor eller förslag är du välkommen att meddela skaparen Tim Severien på hans Twitter @TimSeverien.