Home / How to / Microtip – CSS Tooltip Library with Native Accessibility Features

Microtip – CSS Tooltip Library with Native Accessibility Features

Microtip – CSS Tooltip Library with Native Accessibility Features

You can complete a brisk pursuit on GitHub to discover many custom tooltip libraries. Furthermore, it appears like new ones hit the web each month.

Microtip is a special asset since it keeps running on unadulterated CSS tooltips, offers custom feel, and it utilizes source code that’s fully accessible for all clients.

In the event that you’ve never pondered availability then Microtip may alter your opinion. It’s the ideal mix of clean outline with functionality for all gadgets, all programs, and for clients with real weaknesses.

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:

1
<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.

About Syed Sarim

Check Also

The New Gmail – Material Design and 8 New Features

The New Gmail – Material Design and 8 New Features Gmail has received a major …

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: