Create CSS3 Animated Tooltip In Pure CSS – wenk.css

Category: CSS & CSS3 , Recommended , Tooltip | February 9, 2018
Views Total:132 views
Official Page:Go to website
Last Update:February 9, 2018


Create CSS3 Animated Tooltip In Pure CSS – wenk.css


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>



  • Update

You Might Be Interested In:

Leave a Reply