Create Minified Tooltips in Pure CSS with Wenk

By Jake Rocheleau. in UI/UX. Updated on April 9, 2018.

With such a strange name, you wouldn’t expect much from Wenk, a free CSS tooltip library. Yet it’s one of the smallest libraries you can get measuring under 1KB when gzipped.

Wenk uses pure CSS with data-* attributes to create live tooltips that you can restyle and position to your liking. Best of all, it’s a completely free library with source code available on GitHub.

Recommended Reading: Creating Animated Tooltip Easily with Hint.css

These lightweight tooltips are super simple to add to your website. You just need the Wenk.css file added to your page header, which you can download from the GitHub repo.

Or, you could even add the CDN file which is hosted on GitHub’s CDN. Here’s the code for that:

<link rel="stylesheet"
href="https://cdn.rawgit.com/tiaanduplessis/wenk/master/dist/wenk.css">

Or, if you’re an npm/bower fan you can install this package from the terminal.

The default tooltip tags do not have much custom data. They let you select the position and the width, but you have to manually change the CSS if you want them styled differently.

For example, you might want a CSS arrow added to the tooltip which appears above the tooltip element. This is fairly simple to create but you’ll need to scour the Wenk stylesheet to find the exact CSS class to extend.

Here’s a sample of some default code for Wenk tooltips:

<!-- example of Wenk tooltip appearing on the right -->
<span data-wenk="I'm to the right!" data-wenk-pos="right">
  Wenk to the right!
</span>

The main Wenk landing page includes live demos that you can test by hovering. These are the most basic tooltips you’ll get but they’re perfect for a library that weighs less than a kilobyte.

One major thing to consider is browser support. All versions of Chrome and Firefox should work fine. Same with Opera 12+ and Opera Mini v8+. But IE8 and IE10 seem to have trouble rendering these tooltips. Thankfully, their market share is dropping fast but it’s something to consider before using.

I’m still amazed how much you can do with so few KBs. The Wenk library is a testament to modern frontend development and it shows that a little can go a long way.

You can dig through the entire source on GitHub, along with live demos and code snippets to set up & create these tooltips for your own site.