Hint.css 2.0

A pure CSS tooltip library for your lovely websites

Download (1.5KB minified & gzipped) Commercial Use

Tryout

Try hovering over different things

Color Modifiers

Upgrading from v1.x: If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.

Features

Only CSS. No JavaScript!
Small file size. Only 1.5KB minified and gzipped!
Easy to use. No config required.
Supports Accessibility with aria-label attributes
Works in all modern browsers.

Usage

First get the library from the github repo. Then in your HTML include the library CSS:

<link rel="stylesheet" href="hint.css">

Now, all you need to do is give your element any position class and tooltip text using the aria-label or data-hint attribute:

Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover over me.</span>

Use it with other available modifiers in various combinations. Available modifiers: hint--error, hint--info, hint--warning, hint--success, hint--rounded and hint--bounce.

Commercial License

Hint.css is a free and open-source library, however, if you are using the library for business, commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about UpLabs commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Hint.css in your commercial applications.

Commercial