{"id":43595,"date":"2018-04-11T18:01:10","date_gmt":"2018-04-11T10:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=43595"},"modified":"2023-04-06T19:11:37","modified_gmt":"2023-04-06T11:11:37","slug":"microtip-css-tooltips","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/","title":{"rendered":"Microtip: CSS Tooltip Library with Native Accessibility Features"},"content":{"rendered":"

You can do a quick search on GitHub to find dozens of custom tooltip libraries<\/a>. And it seems like new ones hit the web every month.<\/p>\n

Microtip<\/a> is a unique resource since it runs on pure CSS tooltips, offers custom aesthetics, and it uses source code that\u2019s fully accessible<\/strong> for all users.<\/p>\n

If you\u2019ve never thought much about accessibility then Microtip might change your mind. It\u2019s the perfect blend of clean design with functionality for all devices, all browsers, and for users with major impairments<\/strong>.<\/p>\n

Read Also:<\/strong> Designer\u2019s Guide to the Basics of Web Accessibility Design<\/a><\/p>\n

\"animated<\/figure>\n

On the homepage<\/a>, you\u2019ll find a download link to the Microtip library along with a bunch of code demos.<\/p>\n

You can get this setup through a package manager, a direct download, or by pulling it directly from a CDN. It comes with one CSS file<\/strong> and that\u2019s basically all you need.<\/p>\n

Once you have Microtip added to your page you can start adding tooltips onto page elements. These are fully compliant with the WAI<\/a><\/strong> so they conform to modern accessibility standards perfectly.<\/p>\n

Here\u2019s a sample tooltip code attached to a button element with a custom position:<\/p>\n

<button aria-label=\"Hey tooltip!\" data-microtip-position=\"top-left\" role=\"tooltip\"><\/pre>\n
Not much code right?<\/p>\n
This library is super lightweight with a total of 1KB minified. That\u2019s just crazy considering how much you get with these tooltips.<\/p>\n
Custom CSS properties can be passed through HTML attributes to define the font size, transition style, easing, and plenty of other settings.<\/p>\n
You can also overwrite the CSS directly to make tooltips larger<\/strong> with different colors or fonts.<\/p>\n
Take a look at the customization section<\/a> on the main page for more details. Everything runs through HTML and CSS so you don\u2019t need any scripting knowledge<\/strong> to get this working.<\/p>\n
Microtip is super easy to setup and customize<\/strong> so if you at least know basic frontend coding<\/a> you\u2019ll be fine.<\/p>\n
But have a look at the GitHub repo<\/a> for more setup info & to grab a copy of the stylesheet.<\/p>\n
If you have questions or suggestions for new features you can also drop a line to the creator on Twitter @_ighosh<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.<\/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":[3393],"tags":[4109],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nMicrotip: CSS Tooltip Library with Native Accessibility Features - Hongkiat<\/title>\n<meta name=\"description\" content=\"Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.\" \/>\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\/microtip-css-tooltips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Microtip: CSS Tooltip Library with Native Accessibility Features\" \/>\n<meta property=\"og:description\" content=\"Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/\" \/>\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=\"2018-04-11T10:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:11:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/microtip-css-tooltips\/02-microtip-animated.gif\" \/>\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\\\/microtip-css-tooltips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Microtip: CSS Tooltip Library with Native Accessibility Features\",\"datePublished\":\"2018-04-11T10:01:10+00:00\",\"dateModified\":\"2023-04-06T11:11:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/\"},\"wordCount\":355,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microtip-css-tooltips\\\/02-microtip-animated.gif\",\"keywords\":[\"CSS Frameworks\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/\",\"name\":\"Microtip: CSS Tooltip Library with Native Accessibility Features - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microtip-css-tooltips\\\/02-microtip-animated.gif\",\"datePublished\":\"2018-04-11T10:01:10+00:00\",\"dateModified\":\"2023-04-06T11:11:37+00:00\",\"description\":\"Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microtip-css-tooltips\\\/02-microtip-animated.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microtip-css-tooltips\\\/02-microtip-animated.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microtip-css-tooltips\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Microtip: CSS Tooltip Library with Native Accessibility Features\"}]},{\"@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":"Microtip: CSS Tooltip Library with Native Accessibility Features - Hongkiat","description":"Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.","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\/microtip-css-tooltips\/","og_locale":"en_US","og_type":"article","og_title":"Microtip: CSS Tooltip Library with Native Accessibility Features","og_description":"Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.","og_url":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-04-11T10:01:10+00:00","article_modified_time":"2023-04-06T11:11:37+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/microtip-css-tooltips\/02-microtip-animated.gif","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\/microtip-css-tooltips\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Microtip: CSS Tooltip Library with Native Accessibility Features","datePublished":"2018-04-11T10:01:10+00:00","dateModified":"2023-04-06T11:11:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/"},"wordCount":355,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/microtip-css-tooltips\/02-microtip-animated.gif","keywords":["CSS Frameworks"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/","url":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/","name":"Microtip: CSS Tooltip Library with Native Accessibility Features - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/microtip-css-tooltips\/02-microtip-animated.gif","datePublished":"2018-04-11T10:01:10+00:00","dateModified":"2023-04-06T11:11:37+00:00","description":"Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/microtip-css-tooltips\/02-microtip-animated.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/microtip-css-tooltips\/02-microtip-animated.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/microtip-css-tooltips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Microtip: CSS Tooltip Library with Native Accessibility Features"}]},{"@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\/p4uxU-bl9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43595","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=43595"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43595\/revisions"}],"predecessor-version":[{"id":65780,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43595\/revisions\/65780"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=43595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=43595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=43595"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=43595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}