Pure HTML5 / CSS3 Animated Tooltip Library – Tooltip.css

Tooltip.css is a pure CSS implementation of animated tooltips using Html5 data attributes and CSS3 transitions & transforms.

How to use it:

Place the Tooltip.css into the document’s head section like this:

<link href="tooltip.css" rel="stylesheet">

Add any html content to the tooltip using data-tooltip attribute.

<span data-tooltip="Tooltip here">Hover me</span>

Customize the position.

<ul>
    <li>data-tooltip-bottom</li>
    <li>data-tooltip-top</li>
    <li>data-tooltip-left</li>
    <li>data-tooltip-right</li>
</ul>

Add a mask effect to the tooltip.

data-tooltip-mask