Today I am going to introduce a awesome plugin Hint.css, A pure CSS tooltip library for your lovely websites. It is easy to use and very light weight and no javascript you can purely manage this tooptip in css, 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.
pure-css-tooltip
Step.1- Include hint.css in your page.

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




Step.2- Use class hint Now, all you need to do is give your element any position class and tooltip text using the aria-label or data-hint attribute:

Hello Sir, <span class="hint--bottom"  aria-label="Thank you!" style="color:red">hover over me.

You can choose position like hint–bottom, hint–top, hint–left, hint–right
Also Use it with other available modifiers in various combinations. Available modifiers: hint–error, hint–info, hint–warning, hint–success, hint–rounded and hint–bounce.



See live demo and download source code.


DEMO


DOWNLOAD

See offical website Cick Here

If you like this post please don’t forget to subscribe my public notebook for more useful stuff