CSS Tooltip Library Hint.css

Hint Tooltip
Hint Tooltip

Tooltips are one of the coolest part of a UI framework. Usually Javascript is used to make awesome looking tooltips. There are lot of plugins fro jQuery to make fantastic tooltips. But now we can make great tooltips using css only. Hint.css is a css library for making good tool tips.

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.

CSS3 Transitions on pseudo elements is currently available on Firefox only. On rest of the browsers it degrades gracefully without any transition.

The installation is very easy. Just download Hint.css from the github repo. 

Include the css in the webpage.

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

Then implement tooltip

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

 

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

Website : Hint.css

 

Enhanced by Zemanta

Leave a Reply