Hint.css 2.0

A pure CSS tooltip library for your lovely websites


Download (1.5KB minified & gzipped) Hint.css is free to use for personal and commercial projects

Tryout

Try hovering over different things
bottom-right
bottom
bottom-left
right
.
left
top-right
top
top-left

Color Modifiers

Size variations

Small Medium Large

Extra

You can also make tooltips...

Hmm...So you don't like sharp edges?

You can omit the arrow too.

Effects

Dont like animation?

Adding a hint--bounce class gives you that...

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

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.


Made with hands by Kushagra Gour in India • More projects
Also checkout Web Maker - a blazing fast & offline web playground.