Create CSS3 Animated Tooltip In Pure CSS – wenk.css

Preview:

Description:

wenk.css is an extremely lightweight CSS library helps you create CSS3 animated tooltips with configurable sizes and positions attaching to any DOM elements you prefer. Cool animations based on CSS3 transitions and transforms.

How to use it:

To get started, just include the style sheet wenk.css in the header of the html page and done.

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

Define the text to display in the tooltip using data-wenk attribute as follow:

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

Set the 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>

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>

Changelog:

02/09/2018

• Update