Lightweight Animated Tooltip In Pure CSS – Clew.css

Category: CSS & CSS3 , tooltip | December 25, 2015
Author: egoist
Views Total: 1,719
Official Page: Go to website
Last Update: December 25, 2015
License: MIT

Preview:

Lightweight Animated Tooltip In Pure CSS – Clew.css

Description:

Clew.css is a tiny CSS library used for creating simple clean tooltips with animations based on CSS3 transitions and transforms.

How to use it:

Download and include the Clew.css in the header of your document.

<script src="prefixfree.min.js"></script>

Use data-clew attribute to define the content displayed in the tooltip.

<span class="clew-top" data-clew="Top tooltip">Demo</span>

Add a subtle CSS3 animation to the tooltip.

<span class="clew-top clew-animation" data-clew="Top tooltip">Demo</span>

Change the position of the tooltip.

<span class="clew-top clew-animation" data-clew="Top tooltip">Demo</span>
<span class="clew-bottom clew-animation" data-clew="Bottom tooltip">Demo</span>
<span class="clew-left clew-animation" data-clew="Left tooltip">Demo</span>
<span class="clew-right clew-animation" data-clew="Right tooltip">Demo</span>

You Might Be Interested In:


Leave a Reply