While browsers have built-in support for tooltips, which can be added by setting the
What is Hint.css?
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”.
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">
To set a tooltip for an element, add one of the position classes to it:
hint--right, and put tooltip text into
My name is <span class="hint--bottom" data-hint="James Bond">Bond</span>.
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.