{"id":29008,"date":"2017-01-23T20:01:27","date_gmt":"2017-01-23T12:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29008"},"modified":"2017-10-31T19:44:19","modified_gmt":"2017-10-31T11:44:19","slug":"taggd","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/taggd\/","title":{"rendered":"Add Simple Image Tooltip Labels with Taggd"},"content":{"rendered":"

You know how Facebook lets you label faces<\/strong> in photos? Well, Taggd<\/a><\/strong> is kinda like the CSS\/JS equivalent using dots to notate<\/strong> where tooltips should appear on an image.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t40+ Tooltip Scripts in CSS, JavaScript, and jQuery<\/a>\n\t\t\t\t<\/p>\n

The library is completely free, and doesn\u2019t require any dependencies<\/strong> such as jQuery. It runs on pure vanilla JavaScript<\/strong>, and it\u2019s super easy to set up.<\/p>\n

You can learn a bit more from the Taggd home page<\/a> which includes a demo and some basic steps<\/strong> for getting started.<\/p>\n

\"taggd<\/a><\/figure>\n

There\u2019s also a link to the online documentation<\/a><\/strong> using Doclets, a neat little web app made for JS documentation. You can search Taggd versions<\/strong>, or browse the current version<\/strong> in the master branch.<\/p>\n

From there, you\u2019ll get a huge list of properties<\/strong> you can use. Each doc is split by functions that operate on the image<\/strong> (such as addTag()<\/code> or getTag()<\/code>) followed by functions that help you manipulate specific tags<\/strong> (such as setPosition()<\/a><\/code>).<\/p>\n

\"taggd<\/a><\/figure>\n

Again, everything runs on vanilla JavaScript<\/strong> so you don\u2019t need to worry about syntax issues.<\/p>\n

To get started check out the GitHub repo<\/a><\/strong>, and follow the setup directions.<\/p>\n

You just add the Taggd CSS and JS files into your <head><\/code> section<\/strong> , and then create a new instance<\/strong> of the Taggd elements. These can be defined one-by-one<\/strong> or in an array<\/strong>.<\/p>\n

Then append them to an image<\/strong>, and presto! You\u2019re all set to go.<\/p>\n

\"taggd<\/a><\/figure>\n

I would love to see extra features to customize the tag labels<\/strong>, and change their shape. It\u2019d 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\u2019t complain much.<\/p>\n

So far this library is made for modern browsers only<\/strong>, and does not support graceful degradation. However you can always open an issue<\/a> 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\u2019s practical to use for any project.<\/p>\n

Check out the home page of the author<\/a> for sample code<\/strong> and DL links<\/strong> along with a link to the documentation page<\/a><\/strong>.<\/p>\n

And if you have any questions or suggestions feel free to message the creator Tim Severien on his Twitter @TimSeverien<\/a>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 Websites to Have Fun With Your Photos<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"

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\u2019t require any dependencies such as jQuery. It runs on pure vanilla JavaScript, and it\u2019s super easy to set up.…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3543,3497,4117,1057],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAdd Simple Image Tooltip Labels with Taggd - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/taggd\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Simple Image Tooltip Labels with Taggd\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/taggd\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-23T12:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-31T11:44:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/taggd\/01-taggd-feature-tooltip.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Add Simple Image Tooltip Labels with Taggd\",\"datePublished\":\"2017-01-23T12:01:27+00:00\",\"dateModified\":\"2017-10-31T11:44:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/\"},\"wordCount\":387,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/taggd\\\/01-taggd-feature-tooltip.jpg\",\"keywords\":[\"Image Tools\",\"Javascript Library\",\"Javascripts\",\"tooltips\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/\",\"name\":\"Add Simple Image Tooltip Labels with Taggd - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/taggd\\\/01-taggd-feature-tooltip.jpg\",\"datePublished\":\"2017-01-23T12:01:27+00:00\",\"dateModified\":\"2017-10-31T11:44:19+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/taggd\\\/01-taggd-feature-tooltip.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/taggd\\\/01-taggd-feature-tooltip.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/taggd\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Simple Image Tooltip Labels with Taggd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add Simple Image Tooltip Labels with Taggd - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/taggd\/","og_locale":"en_US","og_type":"article","og_title":"Add Simple Image Tooltip Labels with Taggd","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/taggd\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-01-23T12:01:27+00:00","article_modified_time":"2017-10-31T11:44:19+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/taggd\/01-taggd-feature-tooltip.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Add Simple Image Tooltip Labels with Taggd","datePublished":"2017-01-23T12:01:27+00:00","dateModified":"2017-10-31T11:44:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/"},"wordCount":387,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/taggd\/01-taggd-feature-tooltip.jpg","keywords":["Image Tools","Javascript Library","Javascripts","tooltips"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/taggd\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/","url":"https:\/\/www.hongkiat.com\/blog\/taggd\/","name":"Add Simple Image Tooltip Labels with Taggd - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/taggd\/01-taggd-feature-tooltip.jpg","datePublished":"2017-01-23T12:01:27+00:00","dateModified":"2017-10-31T11:44:19+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/taggd\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/taggd\/01-taggd-feature-tooltip.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/taggd\/01-taggd-feature-tooltip.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/taggd\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add Simple Image Tooltip Labels with Taggd"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/s4uxU-taggd","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29008"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29008\/revisions"}],"predecessor-version":[{"id":29010,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29008\/revisions\/29010"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29008"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}