Hint.css – pure CSS tooltips for your projects

A quick solution for tooltips? Here we go with Hint.css!

CSS tooltips

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.

Hint.css - cool tooltips with pure CSS
Hint.css – cool tooltips with pure 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.

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

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

Homepage:

http://kushagragour.in/lab/hint

GitHub:

https://github.com/chinchang/hint.css

Tip: Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1
 
Tags:,