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>





Tip: Enjoy!

Tags:CSS, tooltip