Microtip: CSS Tooltip Library with Native Accessibility Features
Free tooltip library that runs on CSS and offers functionality for all devices, browsers, and for users with major impairments.
You can do a quick search on GitHub to find dozens of custom tooltip libraries. And it seems like new ones hit the web every month.
Microtip is a unique resource since it runs on pure CSS tooltips, offers custom aesthetics, and it uses source code that’s fully accessible for all users.
If you’ve never thought much about accessibility then Microtip might change your mind. It’s the perfect blend of clean design with functionality for all devices, all browsers, and for users with major impairments.
Read Also: Designer’s Guide to the Basics of Web Accessibility Design
On the homepage, you’ll find a download link to the Microtip library along with a bunch of code demos.
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 and that’s basically all you need.
Once you have Microtip added to your page you can start adding tooltips onto page elements. These are fully compliant with the WAI so they conform to modern accessibility standards perfectly.
Here’s a sample tooltip code attached to a button element with a custom position:
<button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">
Not much code right?
This library is super lightweight with a total of 1KB minified. That’s just crazy considering how much you get with these tooltips.
Custom CSS properties can be passed through HTML attributes to define the font size, transition style, easing, and plenty of other settings.
You can also overwrite the CSS directly to make tooltips larger with different colors or fonts.
Take a look at the customization section on the main page for more details. Everything runs through HTML and CSS so you don’t need any scripting knowledge to get this working.
Microtip is super easy to setup and customize so if you at least know basic frontend coding you’ll be fine.
But have a look at the GitHub repo for more setup info & to grab a copy of the stylesheet.
If you have questions or suggestions for new features you can also drop a line to the creator on Twitter @_ighosh.