CSS Tooltip Library Hint.css

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

Ranjith Siji: I am a Full stack Web Developer. I'm interested in Web Designing and passionate towards FOSS. I love Linux and like to promote it. A quick leaner, quick implementer, not away from errors, staying for software and knowledge freedom and doing programming in PHP, Mysql, Postgresql, Laravel, Angulajs and more..