Add Simple Image Tooltip Labels with Taggd

By Jake Rocheleau. in Web Design. Updated on October 31, 2017.

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.

The library is completely free, and doesn’t require any dependencies such as jQuery. It runs on pure vanilla JavaScript, and it’s super easy to set up.

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 addTag() or getTag()) followed by functions that help you manipulate specific tags (such as setPosition()).

Again, everything runs on vanilla JavaScript so you don’t need to worry about syntax issues.

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.

Check out the home page of the author for sample code and DL links along with a link to the documentation page.

And if you have any questions or suggestions feel free to message the creator Tim Severien on his Twitter @TimSeverien.