Repository: mightyCrow/wenk
Branch: master
Commit: fd79cbd2383e
Files: 16
Total size: 41.4 KB

Directory structure:
gitextract_f15eppgp/

├── .editorconfig
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── demo/
│   └── index.html
├── dist/
│   ├── themes/
│   │   └── material.css
│   ├── wenk.css
│   ├── wenk.cssnext.css
│   ├── wenk.less
│   └── wenk.scss
├── gulpfile.js
├── package.json
└── src/
    ├── wenk.css
    ├── wenk.less
    └── wenk.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
root = true

[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
indent_style = space
indent_size = 2


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
node_modules

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

# Mac stuff
*~
.DS_Store

# IDE
.idea


================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
  - stable


================================================
FILE: LICENSE
================================================
The MIT License (MIT)
=====================

Copyright © 2018 Tiaan du Plessis <tiaanduplessis@hotmail.com>

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the “Software”), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: README.md
================================================
<div align="center">
	<img src="media/banner.png" alt="wenk">
</div>
<br>
<div align="center">
	Lightweight pure CSS tooltip for the greater good
</div>
<br>
<div align="center">
  <a href="https://npmjs.org/package/wenk">
    <img src="https://img.shields.io/npm/v/wenk.svg?style=flat-square" alt="Package version" />
  </a>
  <a href="https://npmjs.org/package/wenk">
  <img src="https://img.shields.io/npm/dm/wenk.svg?style=flat-square" alt="Downloads" />
  </a>
  <a href="https://github.com/feross/standard">
    <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square" alt="Standard" />
  </a>
  <a href="https://travis-ci.org/tiaanduplessis/wenk">
    <img src="https://img.shields.io/travis/tiaanduplessis/wenk.svg?style=flat-square" alt="Travis Build" />
  </a>
  <a href="https://badge.fury.io/gh/tiaanduplessis%2Fwenk">
    <img src="https://badge.fury.io/gh/tiaanduplessis%2Fwenk.svg?style=flat-square" alt="GitHub version" />
  </a>
  <a href="https://github.com/tiaanduplessis/wenk/blob/master/other/LICENSE">
    <img src="https://img.shields.io/npm/l/wenk.svg?style=flat-square" alt="License" />
  </a>
  <a href="http://makeapullrequest.com">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs" />
  </a>
  <a href="https://greenkeeper.io/">
    <img src="https://badges.greenkeeper.io/tiaanduplessis/wenk.svg" alt="Greenkeeper" />
  </a>
</div>
<br>
<div align="center">
  <a href="https://github.com/tiaanduplessis/wenk/watchers">
    <img src="https://img.shields.io/github/watchers/tiaanduplessis/wenk.svg?style=social" alt="Github Watch Badge" />
  </a>
  <a href="https://github.com/tiaanduplessis/wenk/stargazers">
    <img src="https://img.shields.io/github/stars/tiaanduplessis/wenk.svg?style=social" alt="Github Star Badge" />
  </a>
  <a href="https://twitter.com/intent/tweet?text=Check%20out%20wenk!%20https://github.com/tiaanduplessis/wenk%20%F0%9F%91%8D">
    <img src="https://img.shields.io/twitter/url/https/github.com/tiaanduplessis/wenk.svg?style=social" alt="Tweet" />
  </a>
</div>

## 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
<link rel="stylesheet" href="https://unpkg.com/wenk/dist/wenk.css">
<!-- Or -->
<link rel="stylesheet" href="https://cdn.rawgit.com/tiaanduplessis/wenk/master/dist/wenk.css">
```

**Install with npm**

```sh
$ npm install wenk
```

**Install with yarn**

```sh
$ yarn add wenk
```

## Usage

<div align="center">
	<img width="90%" src="media/wenk.gif" alt="wenk">
</div>

Simply add the `data-wenk` attribute to your HTML with the text you want to display.
```html
<span data-wenk="This is a tooltip!"></span>
```

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
<span data-wenk="I'm to the right!" data-wenk-pos="right">Wenk to the right!</span>
<span data-wenk="I'm to the left!" data-wenk-pos="left">Wenk to the left!</span>
<span data-wenk="I'm at the bottom!" data-wenk-pos="bottom">Wenk to the button!</span>
<!-- Or -->
<span class="wenk--right" data-wenk="I'm to the right!">Wenk to the right!</span>
<span class="wenk--left" data-wenk="I'm to the left!">Wenk to the left!</span>
<span class="wenk--bottom" data-wenk="I'm at the bottom!">Wenk to the button!</span>
```

The width of the tooltip can also easily be changed.
```html
<span data-wenk="I'm small!" data-wenk-length="small">Small wenk!</span>
<span data-wenk="I'm medium!" data-wenk-length="medium">Medium wenk!</span>
<span data-wenk="I'm large!" data-wenk-length="large">Large wenk!</span>
<span data-wenk="I fit!" data-wenk-length="fit">I fit just right!</span>
<!-- Or -->
<span data-wenk="I'm small!" class="wenk-length--small">Small wenk!</span>
<span data-wenk="I'm medium!" class="wenk-length--large">Medium wenk!</span>
<span data-wenk="I'm large!" class="wenk-length--large">Large wenk!</span>
<span data-wenk="I fit!" class="wenk-length--fit">I fit just right!</span>
```

You can also align your text within the container
```html
<p><span data-wenk="I'm right!" class="wenk-align--right">Wenk to the right!</span></p>
<p><span data-wenk="I'm center!" class="wenk-align--center">Wenk in the center!</span></p>
```

## 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.


================================================
FILE: demo/index.html
================================================
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Wenk - Lightweight pure CSS tooltip for the greater good</title>

	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">

	<!-- https://github.com/tiaanduplessis/barebones-css -->
	<link rel="stylesheet" href="https://cdn.rawgit.com/tiaanduplessis/barebones-css/master/dist/barebones.min.css">

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

	<style>
		main {
			margin-top: 60px;
		}

		section {
			margin-bottom: 30px;
			width: 80%;
		}

		.heart:after {
			content: "\2764";
			color: #f45660;
		}

		footer {
			margin-top: 50px;
		}

		.button,
		.button--outline {
			width: 170px;
		}
	</style>
</head>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-87263048-1', 'auto');
  ga('send', 'pageview');
</script>

<body>
	<!-- This HTML is ugly cuz I'm lazy -->
	<a href="https://github.com/tiaanduplessis/wenk" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
	<style>
		.github-corner:hover .octo-arm {
			animation: octocat-wave 560ms ease-in-out
		}

		@keyframes octocat-wave {
			0%,
			100% {
				transform: rotate(0)
			}
			20%,
			60% {
				transform: rotate(-25deg)
			}
			40%,
			80% {
				transform: rotate(10deg)
			}
		}

		@media (max-width:500px) {
			.github-corner:hover .octo-arm {
				animation: none
			}
			.github-corner .octo-arm {
				animation: octocat-wave 560ms ease-in-out
			}
		}
	</style>
	<main class="row center-xs container-fluid">
		<section class="center-xs">
			<h1>Wenk 😉</h1>
			<p>
				Wenk is a Lightweight tooltip available in pure CSS, <a href="http://cssnext.io/">cssnext</a> using <a href="http://postcss.org/">PostCSS</a>, <a
        href="http://lesscss.org/">Less</a> or <a href="http://sass-lang.com/">SCSS</a>. The <strong>minified version is just 733 bytes when gzipped</strong>.
				It can easily be styled using <code>data-*</code> attributes or classes. By default the tooltip will adjust to fit the content.
			</p>
		</section>
		<section class="center-xs">
			<h3>Display at different positions!</h3>
			<p><span data-wenk="👇 I'm at the top!">Wenk to the top!</span></p>
			<p><span data-wenk="👉 I'm to the right!" data-wenk-pos="right">Wenk to the right!</span></p>
			<p><span data-wenk="I'm to the left! 👈" data-wenk-pos="left">Wenk to the left!</span></p>
			<p><span data-wenk="👆 I'm at the bottom!" data-wenk-pos="bottom">Wenk to the bottom!</span></p>
		</section>
		<section class="center-xs">
			<h3>Display at different widths!</h3>
			<!--
			<p><span data-wenk="I'm small!" data-wenk-length="small">Small wenk!</span></p>
			<p><span data-wenk="I'm medium!" data-wenk-length="medium">Medium wenk!</span></p>
			<p><span data-wenk="I'm large!" data-wenk-length="large">Large wenk!</span></p>
			<p><span data-wenk="I fit!" data-wenk-length="fit">I fit just right!</span></p>
			-->
			<p><span data-wenk="I'm small!" class="wenk-length--small">Small wenk!</span></p>
			<p><span data-wenk="I'm medium!" class="wenk-length--medium">Medium wenk!</span></p>
			<p><span data-wenk="I'm large!" class="wenk-length--large">Large wenk!</span></p>
			<p><span data-wenk="I fit!" class="wenk-length--fit">I fit just right!</span></p>
		</section>
		<section class="center-xs">
			<h3>Display at different alignments!</h3>
			<p><span data-wenk="👉 I'm right!" class="wenk-align--right wenk-length--large">Right wenk!</span></p>
			<p><span data-wenk="👉 I'm center! 👈" class="wenk-align--center wenk-length--large">center wenk!</span></p>
		</section>
		<section>
			<a class="button" href="https://github.com/tiaanduplessis/wenk/archive/v1.0.6.zip" target="_blank">DOWNLOAD</a>
			<a class="button--outline" href="https://github.com/tiaanduplessis/wenk" target="_blank">View on GitHub</a>
		</section>
	</main>
	<footer class="row center-xs" style="padding-bottom: 10rem">
		<p>
			Created with <span class="heart"></span> by <a href="https://github.com/tiaanduplessis" target="_blank">Tiaan du Plessis</a> using <a href="https://tiaanduplessis.github.io/barebones-css/">Barebones</a>.<br>
		</p>
	</footer>
</body>

</html>


================================================
FILE: dist/themes/material.css
================================================
/**
 * wenk - Lightweight tooltip for the greater good
 * @version v1.0.5
 * (c) 2017 Tiaan du Plessis @tiaanduplessis |
 * @link https://tiaanduplessis.github.io/wenk/
 * @license MIT
 */
 [data-wenk] {
    position: relative
}

[data-wenk]:after {
    position: absolute;
    font-size: 13px;
    content: attr(data-wenk);
    padding: 12.8px;
    padding: .4rem .85rem;
	border-radius: 4px;
    background-color: #607d8b;
	font-family: 'Rubik', sans-serif;
    color: #fff;
    line-height: 20px;
    line-height: 1.25rem;
    text-align: left;
    z-index: 999;
    pointer-events: none;
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    white-space: pre;
    width: auto
}

[data-wenk]:before {
	position: absolute;
    content: '';
	opacity: 0;
    width: .71428571em;
    height: .71428571em;
    background: #607d8b;
	left: 50%;
	top: -1.08em;
    -webkit-transform: translateY(-5px) translateX(-50%) rotate(45deg);
    transform: translateY(-5px) translateX(-50%) rotate(45deg);
	-webkit-transition: all .25s ease-out, opacity .05s;
    transition: all .25s ease-out, opacity .05s;
    z-index: 1000;
}

[data-wenk]:after {
    opacity: 0
}

[data-wenk]:hover {
    overflow: visible
}

[data-wenk]:hover:after {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, -10px);
            transform: translate(-50%, -10px)
}

[data-wenk]:hover:before {
	display: block;
	opacity: 1;
	visibility: visible;
  top: -1.08em;
	-webkit-transform: translateX(-50%) rotate(45deg);
            transform: translateX(-50%) rotate(45deg);
	-webkit-transition: all .25s ease-out, opacity .25s linear .15s;
    transition: all .25s ease-out, opacity .25s linear .15s;
}

[data-wenk].wenk--bottom, [data-wenk][data-wenk-pos="bottom"] {}

[data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos="bottom"]:after {
    bottom: auto;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}

[data-wenk].wenk--bottom:before, [data-wenk][data-wenk-pos="bottom"]:before {
	z-index: 998;
	top: auto;
    bottom: -1.08em;
	transform: translateX(-50%) rotate(45deg);
}

[data-wenk].wenk--bottom:hover, [data-wenk][data-wenk-pos="bottom"]:hover {}

[data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos="bottom"]:hover:after {
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px)
}

[data-wenk].wenk--left, [data-wenk][data-wenk-pos="left"] {}

[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos="left"]:after {
    bottom: auto;
    left: auto;
    top: 50%;
    right: 100%;
    -webkit-transform: translate(10px, -50%);
            transform: translate(10px, -50%)
}

[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos="left"]:before {
	z-index: 999;
	top: 50%;
	left: -1.08em;
	transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 1px 0px 0px rgba(57, 57, 57, 0.26)
}

[data-wenk].wenk--left:hover, [data-wenk][data-wenk-pos="left"]:hover {}

[data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos="left"]:hover:after {
    -webkit-transform: translate(-10px, -50%);
            transform: translate(-10px, -50%)
}

[data-wenk].wenk--right, [data-wenk][data-wenk-pos="right"] {}

[data-wenk].wenk--right:after, [data-wenk][data-wenk-pos="right"]:after {
    bottom: auto;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-10px, -50%);
            transform: translate(-10px, -50%);
}

[data-wenk].wenk--right:before, [data-wenk][data-wenk-pos="right"]:before {
	z-index: 998;
    top: 50%;
    right: -1.08em;
    left: auto;
    transform: translateY(-50%) rotate(45deg);
}

[data-wenk].wenk--right:hover, [data-wenk][data-wenk-pos="right"]:hover {}

[data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos="right"]:hover:after {
    -webkit-transform: translate(10px, -50%);
            transform: translate(10px, -50%)
}

[data-wenk][data-wenk-length="small"]:after, [data-wenk].wenk-length--small:after {
    white-space: normal;
    width: 80px
}

[data-wenk][data-wenk-length="medium"]:after, [data-wenk].wenk-length--medium:after {
    white-space: normal;
    width: 150px
}

[data-wenk][data-wenk-length="large"]:after, [data-wenk].wenk-length--large:after {
    white-space: normal;
    width: 260px
}

[data-wenk][data-wenk-length="fit"]:after, [data-wenk].wenk-length--fit:after {
    white-space: normal;
    width: 100%
}

[data-wenk][data-wenk-align="right"]:after, [data-wenk].wenk-align--right:after {
    text-align: right
}

[data-wenk][data-wenk-align="center"]:after, [data-wenk].wenk-align--center:after {
    text-align: center
}

[data-wenk=""]:after {
    visibility: hidden !important;
}


================================================
FILE: dist/wenk.css
================================================
/**
 * wenk - Lightweight tooltip for the greater good
 * @version v1.0.6
 * (c) 2018 Tiaan du Plessis @tiaanduplessis |
 * @link https://tiaanduplessis.github.io/wenk/
 * @license MIT
 */
 [data-wenk] {
    position: relative
}

[data-wenk]:after {
    position: absolute;
    font-size: 13px;
    border-radius: .4rem;
    content: attr(data-wenk);
    padding: 12.8px;
    padding: .8rem;
    background-color: rgba(17, 17, 17, .8);
    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, .1);
            box-shadow: 0 0 14px rgba(0, 0, 0, .1);
    color: #fff;
    line-height: 20px;
    line-height: 1.25rem;
    text-align: left;
    z-index: 1;
    pointer-events: none;
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px);
    white-space: pre;
    width: auto;
}

[data-wenk]:after {
    opacity: 0;
}

[data-wenk]:hover {
    overflow: visible
}

[data-wenk]:hover:after {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, -10px);
            transform: translate(-50%, -10px);
}

[data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos="bottom"]:after {
    bottom: auto;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -10px);
            transform: translate(-50%, -10px);
}

[data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos="bottom"]:hover:after {
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px);
}

[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos="left"]:after {
    bottom: auto;
    left: auto;
    top: 50%;
    right: 100%;
    -webkit-transform: translate(10px, -50%);
            transform: translate(10px, -50%);
}

[data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos="left"]:hover:after {
    -webkit-transform: translate(-10px, -50%);
            transform: translate(-10px, -50%);
}

[data-wenk].wenk--right:after, [data-wenk][data-wenk-pos="right"]:after {
    bottom: auto;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-10px, -50%);
            transform: translate(-10px, -50%);
}

[data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos="right"]:hover:after {
    -webkit-transform: translate(10px, -50%);
            transform: translate(10px, -50%);
}

[data-wenk][data-wenk-length="small"]:after, [data-wenk].wenk-length--small:after {
    white-space: normal;
    width: 80px;
}

[data-wenk][data-wenk-length="medium"]:after, [data-wenk].wenk-length--medium:after {
    white-space: normal;
    width: 150px;
}

[data-wenk][data-wenk-length="large"]:after, [data-wenk].wenk-length--large:after {
    white-space: normal;
    width: 260px;
}

[data-wenk][data-wenk-length="fit"]:after, [data-wenk].wenk-length--fit:after {
    white-space: normal;
    width: 100%;
}

[data-wenk][data-wenk-align="right"]:after, [data-wenk].wenk-align--right:after {
    text-align: right;
}

[data-wenk][data-wenk-align="center"]:after, [data-wenk].wenk-align--center:after {
    text-align: center;
}

[data-wenk=""]:after {
    visibility: hidden !important;
}


================================================
FILE: dist/wenk.cssnext.css
================================================
/**
 * wenk - Lightweight tooltip for the greater good
 * @version v1.0.6
 * (c) 2018 Tiaan du Plessis @tiaanduplessis |
 * @link https://tiaanduplessis.github.io/wenk/
 * @license MIT
 */
 :root {
    --font-size: 13px;
    --font-color: #fff;
    --bg-color: rgba(17, 17, 17, .8);
    --length-small: 80px;
    --length-medium: 150px;
    --length-large: 260px;
}

[data-wenk] {
    position: relative;
    &:after {
        position: absolute;
        font-size: var(--font-size);
        border-radius: .4rem;
        content: attr(data-wenk);
        padding: .8rem;
        background-color: var(--bg-color);
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
        color: var(--font-color);
        line-height: 1.25rem;
        text-align: left;
        z-index: 1;
        pointer-events: none;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
        white-space: pre;
        width: auto;
    }
    &:after {
        opacity: 0;
    }
    &:hover {
        overflow: visible;
        &:after {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -10px);
        }
    }

    &.wenk--bottom, &[data-wenk-pos="bottom"] {
        &:after {
            bottom: auto;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -10px);
        }
        &:hover {
            &:after {
                transform: translate(-50%, 10px);
            }
        }
    }

    &.wenk--left, &[data-wenk-pos="left"] {
        &:after {
            bottom: auto;
            left: auto;
            top: 50%;
            right: 100%;
            transform: translate(10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(-10px, -50%);
            }
        }
    }

    &.wenk--right, &[data-wenk-pos="right"] {
        &:after {
            bottom: auto;
            top: 50%;
            left: 100%;
            transform: translate(-10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(10px, -50%);
            }
        }
    }

    &[data-wenk-length="small"]:after, &.wenk-length--small:after {
        white-space: normal;
        width: var(--length-small);
    }
    &[data-wenk-length="medium"]:after, &.wenk-length--medium:after {
        white-space: normal;
        width: var(--length-medium);
    }
    &[data-wenk-length="large"]:after, &.wenk-length--large:after {
        white-space: normal;
        width: var(--length-large);
    }
    &[data-wenk-length="fit"]:after, &.wenk-length--fit:after {
        white-space: normal;
        width: 100%;
    }

    &[data-wenk-align="right"]:after, &.wenk-align--right:after {
        text-align: right;
    }
    &[data-wenk-align="center"]:after, &.wenk-align--center:after {
        text-align: center;
    }
}

[data-wenk=""]:after {
    visibility: hidden !important;
}


================================================
FILE: dist/wenk.less
================================================
/**
 * wenk - Lightweight tooltip for the greater good
 * @version v1.0.6
 * (c) 2018 Tiaan du Plessis @tiaanduplessis |
 * @link https://tiaanduplessis.github.io/wenk/
 * @license MIT
 */
 @wenk-font-size: 13px;
@wenk-font-color: #fff;
@wenk-bg-color: rgba(17, 17, 17, .8);
@wenk-length-small: 80px;
@wenk-length-medium: 150px;
@wenk-length-large: 260px;
[data-wenk] {
	position: relative;
	&:after {
		position: absolute;
		font-size: @wenk-font-size;
		border-radius: .4rem;
		content: attr(data-wenk);
		padding: .8rem;
		background-color: @wenk-bg-color;
		box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
		color: @wenk-font-color;
		line-height: 1.25rem;
		text-align: left;
		z-index: 1;
		pointer-events: none;
		display: block;
		opacity: 0;
		visibility: hidden;
		transition: all .3s;
		bottom: 100%;
		left: 50%;
		transform: translate(-50%, 10px);
		white-space: pre;
		width: auto;
	}
	&:after {
		opacity: 0;
	}
	&:hover {
		overflow: visible;
		&:after {
			display: block;
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, -10px);
		}
	}
	/* ===[Tooltip Down]=== */
	&.wenk--bottom,
	&[data-wenk-pos="bottom"] {
		&:after {
			bottom: auto;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -10px);
		}
		&:hover {
			&:after {
				transform: translate(-50%, 10px);
			}
		}
	}
	/* ===[Tooltip Left]=== */
	&.wenk--left,
	&[data-wenk-pos="left"] {
		&:after {
			bottom: auto;
			left: auto;
			top: 50%;
			right: 100%;
			transform: translate(10px, -50%);
		}
		&:hover {
			&:after {
				transform: translate(-10px, -50%);
			}
		}
	}
	/* ===[Tooltip Right]=== */
	&.wenk--right,
	&[data-wenk-pos="right"] {
		&:after {
			bottom: auto;
			top: 50%;
			left: 100%;
			transform: translate(-10px, -50%);
		}
		&:hover {
			&:after {
				transform: translate(10px, -50%);
			}
		}
	}
	/* ===[Length of tooltip]=== */
	&[data-wenk-length="small"]:after,
	&.wenk-length--small:after {
		white-space: normal;
		width: @wenk-length-small;
	}
	&[data-wenk-length="medium"]:after,
	&.wenk-length--medium:after {
		white-space: normal;
		width: @wenk-length-medium;
	}
	&[data-wenk-length="large"]:after,
	&.wenk-length--large:after {
		white-space: normal;
		width: @wenk-length-large;
	}
	&[data-wenk-length="fit"]:after,
	&.wenk-length--fit:after {
		white-space: normal;
		width: 100%;
	}
	/* ===[Alignment of tooltip]=== */
	&[data-wenk-align="right"]:after,
	&.wenk-align--right:after {
		text-align: right;
	}
	&[data-wenk-align="center"]:after,
	&.wenk-align--center:after {
		text-align: center;
	}
}

[data-wenk=""]:after {
	visibility: hidden !important;
}


================================================
FILE: dist/wenk.scss
================================================
/**
 * wenk - Lightweight tooltip for the greater good
 * @version v1.0.6
 * (c) 2018 Tiaan du Plessis @tiaanduplessis |
 * @link https://tiaanduplessis.github.io/wenk/
 * @license MIT
 */
 $wenk-font-size: 13px !default;
$wenk-font-color: #fff !default;
$wenk-bg-color: rgba(17, 17, 17, .8) !default;
$wenk-length-small: 80px !default;
$wenk-length-medium: 150px !default;
$wenk-length-large: 260px !default;

[data-wenk] {
    position: relative;
    &:after {
        position: absolute;
        font-size: $wenk-font-size;
        border-radius: .4rem;
        content: attr(data-wenk);
        padding: .8rem;
        background-color: $wenk-bg-color;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
        color: $wenk-font-color;
        line-height: 1.25rem;
        text-align: left;
        z-index: 1;
        pointer-events: none;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
        white-space: pre;
        width: auto;
    }
    &:after {
        opacity: 0;
    }
    &:hover {
        overflow: visible;
        &:after {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -10px);
        }
    }

    /* ===[Tooltip Down]=== */
    &.wenk--bottom, &[data-wenk-pos="bottom"] {
        &:after {
            bottom: auto;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -10px);
        }
        &:hover {
            &:after {
                transform: translate(-50%, 10px);
            }
        }
    }

    /* ===[Tooltip Left]=== */
    &.wenk--left, &[data-wenk-pos="left"] {
        &:after {
            bottom: auto;
            left: auto;
            top: 50%;
            right: 100%;
            transform: translate(10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(-10px, -50%);
            }
        }
    }

    /* ===[Tooltip Right]=== */
    &.wenk--right, &[data-wenk-pos="right"] {
        &:after {
            bottom: auto;
            top: 50%;
            left: 100%;
            transform: translate(-10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(10px, -50%);
            }
        }
    }

    /* ===[Length of tooltip]=== */
    &[data-wenk-length="small"]:after, &.wenk-length--small:after {
        white-space: normal;
        width: $wenk-length-small;
    }
    &[data-wenk-length="medium"]:after, &.wenk-length--medium:after {
        white-space: normal;
        width: $wenk-length-medium;
    }
    &[data-wenk-length="large"]:after, &.wenk-length--large:after {
        white-space: normal;
        width: $wenk-length-large;
    }
    &[data-wenk-length="fit"]:after, &.wenk-length--fit:after {
        white-space: normal;
        width: 100%;
    }

    /* ===[Alignment of tooltip]=== */
    &[data-wenk-align="right"]:after, &.wenk-align--right:after {
        text-align: right;
    }
    &[data-wenk-align="center"]:after, &.wenk-align--center:after {
        text-align: center;
    }
}

[data-wenk=""]:after {
    visibility: hidden !important;
}


================================================
FILE: gulpfile.js
================================================
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const browserSync = require('browser-sync');
const del = require('del');
const $ = gulpLoadPlugins();
const pkg = require('./package.json');
const reload = browserSync.reload;

// Pretty banner
const banner = ['/**',
    ' * <%= pkg.name %> - <%= pkg.description %>',
    ' * @version v<%= pkg.version %>',
    ' * (c) ' + new Date().getFullYear() + ' <%= pkg.author %> |',
    ' * @link <%= pkg.homepage %>',
    ' * @license <%= pkg.license %>',
    ' */',
    ' '
].join('\n');

// Default paths
const paths = {
    output: 'dist/',
    input: {
      css: 'src/wenk.css',
      less: 'src/wenk.less',
      scss: 'src/wenk.scss'
    }
};

// Default postcss plugins
const defaultPlugins = [
    require('postcss-cssnext')()
];

// Get size of all files in output dir
gulp.task('size', () => {
    return gulp.src(`${paths.output}**/*`)
        .pipe($.size({
            gzip: true,
            showFiles: true
        }));
});

// Clean output dir
gulp.task('clean', () => {
    return del(`${paths.output}**/*`);
});

// Build minified CSS
gulp.task('styles:minified', () => {
    return gulp.src(paths.input.css)
        .pipe($.plumber())
        .pipe($.postcss(defaultPlugins.concat([
            require('cssnano')()
        ])))
        .pipe($.rename({
            extname: '.min.css'
        }))
        .pipe($.header(banner, {
            pkg
        }))
        .pipe(gulp.dest(paths.output))
        .pipe(gulp.dest('./demo'))
});

// Build CSS
gulp.task('styles', () => {
    return gulp.src(paths.input.css)
        .pipe($.plumber())
        .pipe($.postcss(defaultPlugins))
        .pipe($.header(banner, {
            pkg
        }))
        .pipe(gulp.dest(paths.output))
});

// Less
gulp.task('styles:less', () => {
  return gulp.src(paths.input.less)
    .pipe($.header(banner, {
        pkg
    }))
    .pipe(gulp.dest(paths.output))
})

// SCSS
gulp.task('styles:scss', () => {
  return gulp.src(paths.input.scss)
    .pipe($.header(banner, {
        pkg
    }))
    .pipe(gulp.dest(paths.output))
})

// cssnext
gulp.task('styles:cssnext', () => {
  return gulp.src(paths.input.css)
    .pipe($.header(banner, {
        pkg
    }))
    .pipe($.rename({
        extname: '.cssnext.css'
    }))
    .pipe(gulp.dest(paths.output))
})

gulp.task('build', ['styles', 'styles:minified', 'styles:less', 'styles:scss', 'styles:cssnext']);

gulp.task('watch', () => {
    gulp.watch([paths.input.css, paths.input.less, paths.input.scss], ['clean', 'build'])
});

gulp.task('demo', ['clean', 'build'], () => {
  browserSync({
    server: './demo'
  });

  gulp.watch([paths.input.css, paths.input.less, paths.input.scss], ['build']);
  gulp.watch('./demo/**/*').on('change', reload);
});

gulp.task('default', ['build', 'watch']);


================================================
FILE: package.json
================================================
{
  "name": "wenk",
  "version": "1.0.8",
  "description": "Lightweight tooltip for the greater good",
  "main": "dist/wenk.css",
  "style": "dist/wenk.css",
  "scripts": {
    "test": "echo nope",
    "build": "gulp build",
    "start": "gulp demo",
    "dev": "gulp",
    "size": "gulp size",
    "deploy": "gulp build && gh-pages -d demo"
  },
  "keywords": [
    "wenk",
    "pure CSS",
    "tooltip",
    "lightweight",
    "hint"
  ],
  "files": [
    "dist"
  ],
  "homepage": "https://tiaanduplessis.github.io/wenk/",
  "author": "Tiaan du Plessis @tiaanduplessis",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.23.6",
    "cssnano": "^4.0.0",
    "del": "^3.0.0",
    "gh-pages": "^2.0.0",
    "gulp": "^4.0.0",
    "gulp-header": "^2.0.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-size": "^3.0.0",
    "postcss-cssnext": "^3.1.0"
  }
}


================================================
FILE: src/wenk.css
================================================
:root {
    --font-size: 13px;
    --font-color: #fff;
    --bg-color: rgba(17, 17, 17, .8);
    --length-small: 80px;
    --length-medium: 150px;
    --length-large: 260px;
}

[data-wenk] {
    position: relative;
    &:after {
        position: absolute;
        font-size: var(--font-size);
        border-radius: .4rem;
        content: attr(data-wenk);
        padding: .8rem;
        background-color: var(--bg-color);
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
        color: var(--font-color);
        line-height: 1.25rem;
        text-align: left;
        z-index: 1;
        pointer-events: none;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
        white-space: pre;
        width: auto;
    }
    &:after {
        opacity: 0;
    }
    &:hover {
        overflow: visible;
        &:after {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -10px);
        }
    }

    &.wenk--bottom, &[data-wenk-pos="bottom"] {
        &:after {
            bottom: auto;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -10px);
        }
        &:hover {
            &:after {
                transform: translate(-50%, 10px);
            }
        }
    }

    &.wenk--left, &[data-wenk-pos="left"] {
        &:after {
            bottom: auto;
            left: auto;
            top: 50%;
            right: 100%;
            transform: translate(10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(-10px, -50%);
            }
        }
    }

    &.wenk--right, &[data-wenk-pos="right"] {
        &:after {
            bottom: auto;
            top: 50%;
            left: 100%;
            transform: translate(-10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(10px, -50%);
            }
        }
    }

    &[data-wenk-length="small"]:after, &.wenk-length--small:after {
        white-space: normal;
        width: var(--length-small);
    }
    &[data-wenk-length="medium"]:after, &.wenk-length--medium:after {
        white-space: normal;
        width: var(--length-medium);
    }
    &[data-wenk-length="large"]:after, &.wenk-length--large:after {
        white-space: normal;
        width: var(--length-large);
    }
    &[data-wenk-length="fit"]:after, &.wenk-length--fit:after {
        white-space: normal;
        width: 100%;
    }

    &[data-wenk-align="right"]:after, &.wenk-align--right:after {
        text-align: right;
    }
    &[data-wenk-align="center"]:after, &.wenk-align--center:after {
        text-align: center;
    }
}

[data-wenk=""]:after {
    visibility: hidden !important;
}


================================================
FILE: src/wenk.less
================================================
@wenk-font-size: 13px;
@wenk-font-color: #fff;
@wenk-bg-color: rgba(17, 17, 17, .8);
@wenk-length-small: 80px;
@wenk-length-medium: 150px;
@wenk-length-large: 260px;
[data-wenk] {
	position: relative;
	&:after {
		position: absolute;
		font-size: @wenk-font-size;
		border-radius: .4rem;
		content: attr(data-wenk);
		padding: .8rem;
		background-color: @wenk-bg-color;
		box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
		color: @wenk-font-color;
		line-height: 1.25rem;
		text-align: left;
		z-index: 1;
		pointer-events: none;
		display: block;
		opacity: 0;
		visibility: hidden;
		transition: all .3s;
		bottom: 100%;
		left: 50%;
		transform: translate(-50%, 10px);
		white-space: pre;
		width: auto;
	}
	&:after {
		opacity: 0;
	}
	&:hover {
		overflow: visible;
		&:after {
			display: block;
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, -10px);
		}
	}
	/* ===[Tooltip Down]=== */
	&.wenk--bottom,
	&[data-wenk-pos="bottom"] {
		&:after {
			bottom: auto;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -10px);
		}
		&:hover {
			&:after {
				transform: translate(-50%, 10px);
			}
		}
	}
	/* ===[Tooltip Left]=== */
	&.wenk--left,
	&[data-wenk-pos="left"] {
		&:after {
			bottom: auto;
			left: auto;
			top: 50%;
			right: 100%;
			transform: translate(10px, -50%);
		}
		&:hover {
			&:after {
				transform: translate(-10px, -50%);
			}
		}
	}
	/* ===[Tooltip Right]=== */
	&.wenk--right,
	&[data-wenk-pos="right"] {
		&:after {
			bottom: auto;
			top: 50%;
			left: 100%;
			transform: translate(-10px, -50%);
		}
		&:hover {
			&:after {
				transform: translate(10px, -50%);
			}
		}
	}
	/* ===[Length of tooltip]=== */
	&[data-wenk-length="small"]:after,
	&.wenk-length--small:after {
		white-space: normal;
		width: @wenk-length-small;
	}
	&[data-wenk-length="medium"]:after,
	&.wenk-length--medium:after {
		white-space: normal;
		width: @wenk-length-medium;
	}
	&[data-wenk-length="large"]:after,
	&.wenk-length--large:after {
		white-space: normal;
		width: @wenk-length-large;
	}
	&[data-wenk-length="fit"]:after,
	&.wenk-length--fit:after {
		white-space: normal;
		width: 100%;
	}
	/* ===[Alignment of tooltip]=== */
	&[data-wenk-align="right"]:after,
	&.wenk-align--right:after {
		text-align: right;
	}
	&[data-wenk-align="center"]:after,
	&.wenk-align--center:after {
		text-align: center;
	}
}

[data-wenk=""]:after {
	visibility: hidden !important;
}


================================================
FILE: src/wenk.scss
================================================
$wenk-font-size: 13px !default;
$wenk-font-color: #fff !default;
$wenk-bg-color: rgba(17, 17, 17, .8) !default;
$wenk-length-small: 80px !default;
$wenk-length-medium: 150px !default;
$wenk-length-large: 260px !default;

[data-wenk] {
    position: relative;
    &:after {
        position: absolute;
        font-size: $wenk-font-size;
        border-radius: .4rem;
        content: attr(data-wenk);
        padding: .8rem;
        background-color: $wenk-bg-color;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
        color: $wenk-font-color;
        line-height: 1.25rem;
        text-align: left;
        z-index: 1;
        pointer-events: none;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
        white-space: pre;
        width: auto;
    }
    &:after {
        opacity: 0;
    }
    &:hover {
        overflow: visible;
        &:after {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -10px);
        }
    }

    /* ===[Tooltip Down]=== */
    &.wenk--bottom, &[data-wenk-pos="bottom"] {
        &:after {
            bottom: auto;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -10px);
        }
        &:hover {
            &:after {
                transform: translate(-50%, 10px);
            }
        }
    }

    /* ===[Tooltip Left]=== */
    &.wenk--left, &[data-wenk-pos="left"] {
        &:after {
            bottom: auto;
            left: auto;
            top: 50%;
            right: 100%;
            transform: translate(10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(-10px, -50%);
            }
        }
    }

    /* ===[Tooltip Right]=== */
    &.wenk--right, &[data-wenk-pos="right"] {
        &:after {
            bottom: auto;
            top: 50%;
            left: 100%;
            transform: translate(-10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(10px, -50%);
            }
        }
    }

    /* ===[Length of tooltip]=== */
    &[data-wenk-length="small"]:after, &.wenk-length--small:after {
        white-space: normal;
        width: $wenk-length-small;
    }
    &[data-wenk-length="medium"]:after, &.wenk-length--medium:after {
        white-space: normal;
        width: $wenk-length-medium;
    }
    &[data-wenk-length="large"]:after, &.wenk-length--large:after {
        white-space: normal;
        width: $wenk-length-large;
    }
    &[data-wenk-length="fit"]:after, &.wenk-length--fit:after {
        white-space: normal;
        width: 100%;
    }

    /* ===[Alignment of tooltip]=== */
    &[data-wenk-align="right"]:after, &.wenk-align--right:after {
        text-align: right;
    }
    &[data-wenk-align="center"]:after, &.wenk-align--center:after {
        text-align: center;
    }
}

[data-wenk=""]:after {
    visibility: hidden !important;
}