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.
Note: CSS3 Transitions on pseudo elements is currently available on Chrome 26+, Firefox 4+ and IE 10 only. On rest of the browsers it degrades gracefully without any transition effect.
E X A M P L E S
Basic ones
Look, there is something over me.
On dimensioned elements
Color based types
Oh man! You are gonna self-destruct in 5 sec.
You can use different classes for different types of tooltips.
Hurray! You have seen all 4 context types.
Extra
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 and hint--always.
