wenk editorconfig travis-ci Bower gulp npm

:wink: Lightweight pure CSS tooltip for the greater good

2 years after

:wink: Wenk

GitHub version npm version Bower version Build Status

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS.



  • It's Lightweight with the minified version being only 701 bytes when gzipped :scream:
  • It's easy to use
  • It's easy to customize


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 Bower

$ bower install wenk

Install with npm

$ npm install wenk

Install with yarn

$ yarn add 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>


Check out the demo here.

Browser 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)

TODO :memo:

  • Add Stylus version


All Contributions are welcome! Please open up an issue if you would like to help out. :smile:


Created with ♥ by Tiaan du Plessis. Licensed under the MIT License.

Related Repositories



A curated list of awesome CSS frameworks, libraries and software. ...



Language agnostic task wrapper and loyal servant. ...



couchapp MAC installation hints ...



Beispiel CouchDB Kassenbuch Applikation aus dem CouchDB Buch ...



Zootool extension for AlfredApp ...

Top Contributors

tiaanduplessis jackmcpickle panstav purtuga


-   v1.0.4 zip tar
-   v1.0.3 zip tar
-   v1.0.2 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar