Clean and Animated Tooltips with Pure CSS – Simptip

Category: CSS & CSS3 , Tooltip | January 8, 2014
Views Total:2,352 views
Official Page:Go to website
Last Update:January 8, 2014


Clean and Animated Tooltips with Pure CSS – Simptip


Simptip is a tooltip resolution built top of SASS to create clean and animated tootips with CSS3 transitions and transforms.

Basic Usage:

Include the minified version of simptip.css in the head section of your page.

<link rel="stylesheet" type="text/css" href="simptip-mini.css" media="screen,projection" />

Wrap your text using <span> element with data-tooltip attribute for the tooltip text. You can use class attribute to set the tooltip’s position, type and animation.

<span class="simptip-position-bottom simptip-success" data-tooltip="I'm a success tooltip">success</span>

Supported positions:

  • simptip-position-top
  • simptip-position-left
  • simptip-position-right
  • simptip-position-bottom

You Might Be Interested In:

Leave a Reply