Lightweight Animated Tooltip In Pure CSS – Clew.css

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>