Minified Tooltips in Pure CSS – Wenk CSS tooltip library

By Deepanker in CSS. Updated on May 4, 2017.

The tooltip is one of the important element of a web page. If you use tooltip, your web page will be more user-friendly and show suggestions to users. There could be various solutions to include the tooltip on the page. I have already written several CSS libraries to add tool tips. This article is about another good CSS tooltip library.

Wenk CSS tooltip library is something you should not miss. It is one of the smallest CSS tooltip libraries and comes under 1KB when gzipped.

Also see: Get thousands of free graphic resources on Freepik

This library uses pure CSS and works with data-* attributes to create live tooltips. You can adjust the style and position as per your own need and interest. The library is free and source code is available on Github.

As I already said, it is pure CSS library, you just need to include the wenk.css in your document. You can either download from Github repo or use the CDN file 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">

To use the tooltip, simply add data-wenk attribute to your HTML with the text you want to display.

<span data-wenk="This is a tooltip!"></span>

You can set the position and even the size of the tooltips. See the image below.

You can either use data-wenk-pos attribute or the .wenk–* class to set the position of tooltip.

For example, if you want to show the tooltip to the right, you can use this markup.

<!-- 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 most important thing to note is that it supports all major browsers including Chrome, Firefox, Opera and even Opera Mini.But IE8 and IE10 seem to have trouble rendering these tooltips.

You can also use data-wenk-length attribute or wenk-length-* class to adjust the width of the tooltip.

If you want to show the smaller one, you can use this markup.

<span data-wenk="I'm small!" data-wenk-length="small">Small wenk!</span>

You can also set it to display at different alignments.

Check out the demo here.

I found this library useful and hope you will also like this. I have written several good free web development resources. You can browse it and see if you find any other good library.

If you also know about any good web design resource that comes for free and should be shared with readers or this blog, you can let us know about it.

Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

0 Comments

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.