Create CSS3 Animated Tooltip In Pure CSS – wenk.css

Category: CSS & CSS3 , Recommended , tooltip | February 9, 2018
Author: mightyCrow
Views Total: 1,566
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

  • Update

Leave a Reply