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

Category: CSS & CSS3 , tooltip | July 16, 2014
Author: jh3y
Views Total: 2,899
Official Page: Go to website
Last Update: July 16, 2014
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply