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

Category: CSS & CSS3 , Tooltip | July 16, 2014
Views Total:1,134 views
Official Page:Go to website
Last Update:July 16, 2014


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


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

You Might Be Interested In:

Leave a Reply