Microtip – CSS Tooltip Library with Native Accessibility Features

You can do a discerning hunt on GitHub to find dozens of tradition tooltip libraries. And it seems like new ones strike a web each month.

Microtip is a singular apparatus given it runs on pristine CSS tooltips, offers tradition aesthetics, and it uses source formula that’s fully accessible for all users.

If you’ve never suspicion most about accessibility afterwards Microtip competence change your mind. It’s a ideal mix of purify pattern with functionality for all devices, all browsers, and for users with vital impairments.

animated examples of microtipanimated examples of microtip

On a homepage, you’ll find a download couple to a Microtip library along with a garland of formula demos.

You can get this setup by a package manager, a approach download, or by pulling it directly from a CDN. It comes with one CSS file and that’s fundamentally all we need.

Once we have Microtip combined to your page we can start adding tooltips onto page elements. These are fully agreeable with a WAI so they heed to complicated accessibility standards perfectly.

Here’s a representation tooltip formula trustworthy to a symbol component with a tradition position:

button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip"

Not most formula right?

This library is super lightweight with a sum of 1KB minified. That’s only crazy deliberation how most we get with these tooltips.

Custom CSS properties can be upheld by HTML attributes to conclude a rise size, transition style, easing, and copiousness of other settings.

You can also overwrite a CSS directly to make tooltips larger with opposite colors or fonts.

Take a demeanour during a customization section on a categorical page for some-more details. Everything runs by HTML and CSS so we don’t need any scripting knowledge to get this working.

Microtip is super easy to setup and customize so if we during slightest know basic frontend coding you’ll be fine.

But have a demeanour during a GitHub repo for some-more setup info to squeeze a duplicate of a stylesheet.

If we have questions or suggestions for new facilities we can also dump a line to a creator on Twitter @_ighosh.

Add Comment