Pure CSS/CSS3 Based Animated Tooltip Replacement – Tips.css

Preview:

Description:

Tips is a simple lightweight solution to add animated, mobile-friendly & highly customizable tooltips on Html elements using pure CSS and CSS3.

Basic usage:

Download and include the tips.css into your page’s head section.

<link href="dist/tips.css" rel="stylesheet">

Add data-tip attribute to an Html element and use data-tip-content to custom the tooltip content.

<span data-tip data-tip-content="I'm a tooltip!">Text</span>

Add helper classes to the html element to customize the tooltip.

• top: position top
• right: position right
• bottom: position bottom
• left: position left
• small: small size
• large: large size
• show: always show