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.
- Full:
https://raw.github.com/chinchang/hint.css/master/hint.css
- 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