Pure HTML5 / CSS3 Animated Tooltip Library – Tooltip.css

Category: CSS & CSS3 , tooltip | February 12, 2016
Author:webexxe
Views Total:566 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

 

You Might Be Interested In:


Leave a Reply