Cool Tooltips with Pure CSS - Hint.css

Cool Tooltips with Pure CSS - Hint.css
File Size: 18.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Hint.css is a tooltip library in CSS that helps you add cool tooltips to any element of your page.  The major difference between Hint.css and othe tooltip plugins is that Hint.css uses data-* attribute, pseudo elements, content property and CSS3 transitions so that it's only compatible with those modern browsers which fully support HTML5 and CSS3.

How to use it:

1. Include Hint.css in your page

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

2. Markup your link with at least 2 classes. Use data-hint attribute to add your tooltip text.

<p> <a href="#" class="hint  hint--top" data-hint="jQueryScript.Net">Look, there is something over me.</a> </p>

3. Position Options

class="hint hint--top" 
class="hint hint--bottom"
class="hint hint--left"
class="hint hint--right"

4. Additionally, you can use other modifiers to style your tooltips


This awesome jQuery plugin is developed by chinchang. For more Advanced Usages, please check the demo page or visit the official website.