You know how Facebook lets you label faces in photos? Well, Taggd is kinda like the CSS/JS equivalent using dots to notate where tooltips should appear on an image.
You can learn a bit more from the Taggd home page which includes a demo and some basic steps for getting started.
There’s also a link to the online documentation using Doclets, a neat little web app made for JS documentation. You can search Taggd versions, or browse the current version in the master branch.
From there, you’ll get a huge list of properties you can use. Each doc is split by functions that operate on the image (such as
getTag()) followed by functions that help you manipulate specific tags (such as
To get started check out the GitHub repo, and follow the setup directions.
You just add the Taggd CSS and JS files into your
<head> section , and then create a new instance of the Taggd elements. These can be defined one-by-one or in an array.
Then append them to an image, and presto! You’re all set to go.
I would love to see extra features to customize the tag labels, and change their shape. It’d be awesome to create a square tag to surround an object rather than a small pink dot. But for a free library with zero dependencies, I can’t complain much.
So far this library is made for modern browsers only, and does not support graceful degradation. However you can always open an issue on the repo page or try to solve other problems if you see any simple ones. Nevertheless, Taggd is still a heck of a plugin, and it’s practical to use for any project.
And if you have any questions or suggestions feel free to message the creator Tim Severien on his Twitter @TimSeverien.
Read Also: 10 Websites to Have Fun With Your Photos