Create CSS3 Animated Tooltip In Pure CSS – wenk.css


Author: mightyCrow
Views Total: 114 views
Official Page: Go to website
Last Update: February 9, 2018
License: MIT

Preview:

Create CSS3 Animated Tooltip In Pure CSS – wenk.css

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

See also  Create A Variety Of Switches With Checkbox And CSS - MoreToggles.css

Leave a Reply

Your email address will not be published. Required fields are marked *