Hint.css tooltip library

Hint.css — pure CSS tooltips

While browsers have built-in support for tooltips, which can be added by setting the title attribute, unfortunately, such tooltips don’t look good and have a long delay before they appear. There are many JavaScript libraries for better looking and better behaving tooltips, for example, Bootstrap includes one. It turns out, though, that you can implement them with CSS alone, and that’s what Hint.css does.

What is Hint.css?

Hint.css is a pure CSS tooltip library. It provides beautiful tooltips with nice animations without using JavaScript.

Tooltip properties are controlled via data-* attributes that you set on DOM elements. They support different positioning: left, right, top, bottom; various appearances: info, warning, success, error; rounded corners. You can also turn off animation or tweak it to be “bouncy”.

Hint.css HTML tooltip library demo

Getting Hint.css

You can download Hint from GitHub: full, minified.

Alternatively, you can use Bower front-end package manager to install it:

bower install hint.css

Include the downloaded file into your page (or add it to your build process), for example:

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

Using Hint.css

To set a tooltip for an element, add one of the position classes to it: hint--top, hint--bottom, hint--left, or hint--right, and put tooltip text into data-hint attribute:

My name is <span class="hint--bottom" data-hint="James Bond">Bond</span>.

Using Hint.css: example

You can tweak the tooltip appearance by adding these classes:

  • hint--error — gives “error” color (red by default)
  • hint--info — gives “info” color (light blue by default)
  • hint--warning — gives “warning” color (golden by default)
  • hint--success — gives “success” color (green by default)
  • hint--always — defines a persisted tooltip which is always shown
  • hint--rounded — makes tooltip corners rounded
  • hint--no-animate — turns off tooltip animation
  • hint--bounce — turns on bouncing type of animation

Hint works in all modern browsers. The transition effect is only supported in Internet Explorer 10 and later, Chrome 26 and later, and Firefox 4 and later.

Discard your JavaScripts, use Hint for tooltips!

Source code and license

Website: http://kushagragour.in/lab/hint/
GitHub: https://github.com/chinchang/hint.css
Author: Kushagra Gour (@chinchang457)
License: MIT

One thought on “Hint.css — pure CSS tooltips”

Leave a Reply

Your email address will not be published. Required fields are marked *