W H A T
Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.
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
On dimensioned elements
Color based types
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--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,.
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: