Lightweight pure CSS tooltip for the greater good
Table of Contents
About
Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS.
As Seen in
Why
- It's Lightweight with the minified version being only 733 bytes when gzipped 😱
- It's easy to use
- It's easy to customize
- It's pure CSS
- You're already here
Install
Install with cdn
<!-- Or -->
Install with npm
$ npm install wenk
Install with yarn
$ yarn add wenk
Usage
Simply add the data-wenk
attribute to your HTML with the text you want to display.
You can display the tooltip at different positions using the data-wenk-pos
attribute or the .wenk--*
class. The default position is at the top.
Wenk to the right!Wenk to the left!Wenk to the button!<!-- Or -->Wenk to the right!Wenk to the left!Wenk to the button!
The width of the tooltip can also easily be changed.
Small wenk!Medium wenk!Large wenk!I fit just right!<!-- Or -->Small wenk!Medium wenk!Large wenk!I fit just right!
You can also align your text within the container
Wenk to the right!Wenk in the center!
Demo
Check out the demo here.
Support
According to doiuse.com the following browsers are currently missing support:
- IE (8,10)
- Opera (12.1)
- Opera Mini (5.0-8.0)
- IE Mobile (10)
Contributing
All Contributions are welcome! Please open up an issue if you would like to help out. 😄
License
Licensed under the MIT License.