HINT.css - CSS tooltips

what

Hint.css is a library that implements tooltips using CSS3 tools without using JavaScript.

The library uses the data- * attribute, pseudo-elements, the content property, and CSS3 transitions to display tooltips.

Library developers remind that CSS3 transitions for pseudo-elements work so far only in the Firefox browser, but will soon be available in the webkit.

how

1. Download and connect the library.
2. In the data-hint attribute of elements, set the text of the prompt.
3. Specify the class hint for elements.
4. Specify the position of the tooltip using one of the following classes:

• hint - top
• hint - right
• hint - bottom
• hint - left

By default, the tooltip is displayed in black. To change the color, one of the following classes is added to the element:

• hint - error - red
• hint - info - brown
• hint - warning - blue
• hint - success - green

So that the tooltip is always displayed, and not only when you hover the cursor, the class hint - always is used.
')

Why

Simple, fast, beautiful, and only 4Kb in the minimum version.

UPD 1:
CSS3 transitions for pseudo-elements are already available in IE10 (thanks to roman01la ), Opera (tested on version 12.02, thanks to loingrim )

UPD 2:
The following browsers are not supported:

• IE <9 (thanks to DjOnline )