HINT.css

A tooltip library in CSS for your lovely websites

W H A T

Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.

It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

Download Hint.css from Github (v1.3.1)

E X A M P L E S

Basic ones

Look, there is something over me.

I am always right!

How about a bottoms up?

What do we get now?

On dimensioned elements

Color based types

Oh man! You are gonna self-destruct in 5 sec.

You did something wrong!

You can use different classes for different types of tooltips.

Hurray! You have seen all 4 context types.

Extra

You can also make tooltips...

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

Effects

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

U S A G E

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

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

Any element on your page which needs to have a tooltip has to be given at least one of the position classes: hint--top, hint--bottom, hint--left, hint--right to position the tooltip.

Hello Sir, <span class="hint--bottom">hover over me.</span>

And the tooltip text has to be given using the data-hint attribute on that element.

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

Result: Hello Sir, hover over me.

[Note: The hint class is no more required and is deprecated in versions >=1.2.0. Tooltip is shown on elements which have the data-hint attribute instead.]

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

Share it if you like it!

Fork me on GitHub