Clean and Animated Tooltips with Pure CSS

Views Total: 2,336 views
Official Page: Go to website
Last Update: January 8, 2014
License: MIT


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
See also  Material and iOS Inspired Toggle Switch With CSS/SCSS

Leave a Reply

Your email address will not be published. Required fields are marked *