Adam Stacoviak changelog.com/posts

hint.css makes pure CSS tooltips too easy

From the hint.css homepage:

hint.css is written as a pure CSS tooltip library which you can use to create cool tooltips for your site. It does not rely on JavaScript, but instead uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. hint.css uses BEM naming convention particularly for the modifiers.

The usage is simple. Download one of the 2 library versions to your project and include the CSS file in the <head> of your page.

  1. Full:
    https://raw.github.com/chinchang/hint.css/master/hint.css
  2. Minified:
    https://raw.github.com/chinchang/hint.css/master/hint.min.css

Then, the tooltip text is passed using the data-hint attribute on the element.

For example:

Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>

If you’re wanting to contribute, hint.css is developed using Sass. The Sass source files can be found in the src directory of the project on GitHub.

Check out the homepage for more details and demos in action.


Discussion

Sign in or Join to comment or subscribe

Player art
  0:00 / 0:00