Skip to content
😉 Lightweight pure CSS tooltip for the greater good
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Cleanup & latest build Feb 7, 2018
dist
media [ImgBot] optimizes images Oct 15, 2017
src
.editorconfig
.gitignore Some cleanup Oct 1, 2016
.travis.yml
LICENSE Cleanup & latest build Feb 7, 2018
README.md Cleanup README Nov 8, 2018
gulpfile.js Fix gulp watch Jan 21, 2017
package.json
yarn.lock

README.md

wenk

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

<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

$ npm install wenk

Install with yarn

$ yarn add wenk

Usage

wenk

Simply add the data-wenk attribute to your HTML with the text you want to display.

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

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

<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

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

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.

You can’t perform that action at this time.