Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tiaanduplessis/wenk
:wink: Lightweight pure CSS tooltip for the greater good
https://github.com/tiaanduplessis/wenk
css less scss stylus tooltip wenk
Last synced: 22 days ago
JSON representation
:wink: Lightweight pure CSS tooltip for the greater good
- Host: GitHub
- URL: https://github.com/tiaanduplessis/wenk
- Owner: tiaanduplessis
- License: mit
- Created: 2016-09-27T15:00:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-02T21:57:02.000Z (about 5 years ago)
- Last Synced: 2024-05-09T15:23:17.307Z (about 1 month ago)
- Topics: css, less, scss, stylus, tooltip, wenk
- Language: CSS
- Homepage: https://tiaanduplessis.github.io/wenk/
- Size: 2.35 MB
- Stars: 689
- Watchers: 14
- Forks: 42
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-css-only - Wenk - 😉 Lightweight pure CSS tooltip for the greater good. (Uncategorized / Uncategorized)
- awesome-stars - tiaanduplessis/wenk - :wink: Lightweight pure CSS tooltip for the greater good (CSS)
- awesome-stars - wenk
README
Lightweight pure CSS tooltip for the greater good
## Table of Contents
- [About](#about)
- [As Seen in](#as-seen-in)
- [Why](#why)
- [Install](#install)
- [Usage](#usage)
- [Demo](#demo)
- [Support](#support)
- [Contributing](#contributing)
- [License](#license)
## About
**Wenk** is a Lightweight tooltip available in pure CSS, [cssnext](http://cssnext.io/) using [PostCSS](http://postcss.org/), [Less](https://raw.githubusercontent.com/tiaanduplessis/wenk/master/src/wenk.less) or [SCSS](https://raw.githubusercontent.com/tiaanduplesssis/wenk/master/src/wenk.scss).
## As Seen in
- [20 Awesome Javascript & CSS Tooltip Libraries](https://bashooka.com/coding/javascript-css-tooltip-libraries/)
- [Create Minified Tooltips in Pure CSS with Wenk](https://www.hongkiat.com/blog/pure-css-lightweight-tooltip-wenk/)
## Why
- It's Lightweight with the **minified version being only 733 bytes when gzipped** :scream:
- It's easy to use
- It's easy to customize
- It's pure CSS
- You're already here
## Install
**Install with cdn**
```html
```
**Install with npm**
```sh
$ npm install wenk
```
**Install with yarn**
```sh
$ yarn add wenk
```
## Usage
Simply add the `data-wenk` attribute to your HTML with the text you want to display.
```html
```
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.
```html
Wenk to the right!
Wenk to the left!
Wenk to the button!
Wenk to the right!
Wenk to the left!
Wenk to the button!
```
The width of the tooltip can also easily be changed.
```html
Small wenk!
Medium wenk!
Large wenk!
I fit just right!
Small wenk!
Medium wenk!
Large wenk!
I fit just right!
```
You can also align your text within the container
```html
Wenk to the right!
Wenk in the center!
```
## Demo
Check out the demo [here](https://tiaanduplessis.github.io/wenk/).
## Support
According to [doiuse.com](http://www.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. :smile:
## License
Licensed under the MIT License.