Pure HTML5 / CSS3 Animated Tooltip Library – Tooltip.css


Author: webexxe
Views Total: 588 views
Official Page: Go to website
Last Update: February 12, 2016
License: MIT

Preview:

Pure HTML5 / CSS3 Animated Tooltip Library – Tooltip.css

Description:

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

 

See also  Check Card Interactions In Pure CSS

Leave a Reply

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