Press "Enter" to skip to content

Lightweight Pure CSS Tooltip Smooth Animation | wenk.css

Wenk is a lightweight tooltip available in CSS or cssnext with PostCSS, Less, or SCSS. The minified version is only 733 bytes in size when compressed in gzip format.

It can be easily modeled with data-* attributes or classes. By default, the tip will be adjusted to fit the content.

How to make use of it:

1. To get started, just include the wenk.css stylesheet in the header of your HTML.

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

2. Define the text to be displayed in the tooltip with the data-wenk attribute as follows:

<span data-wenk="I'm a tooltip!">Hover Me</span>

3. Set positions:

<span data-wenk="I'm a tooltip!" data-wenk-pos="right">Hover Me</span>
<span data-wenk="I'm a tooltip!" data-wenk-pos="bottom">Hover Me</span>
<span data-wenk="I'm a tooltip!" data-wenk-pos="left">Hover Me</span>

4. Set the sizes:

<span data-wenk="I'm a tooltip!" class="wenk-length--small">Hover Me</span>
<span data-wenk="I'm a tooltip!" class="wenk-length--medium">Hover Me</span>
<span data-wenk="I'm a tooltip!" class="wenk-length--large">Hover Me</span>
<span data-wenk="I'm a tooltip!" class="wenk-length--fit">Hover Me</span>

create css3 animated tooltip, wenk Plugin/Github

See Demo And Download

Official Website(tiaanduplessis): Click Here

This superior jQuery/javascript plugin is developed by tiaanduplessis. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.