A simple CSS tooltip made with Sass
Latest commit afd3f73 Nov 22, 2014 @arashmanteghi Update simptip.scss
Failed to load latest commit information.
LICENSE Initial commit Oct 16, 2013
README.md Update README.md Nov 22, 2014
bower.json Update bower.json Nov 22, 2014
demo.html Update demo.html Nov 22, 2014
simptip.css Update simptip.css Nov 22, 2014
simptip.min.css Update simptip.min.css Nov 22, 2014
simptip.scss Update simptip.scss Nov 22, 2014


Simptip [v1.0.4]

A simple CSS tooltip made with Sass

Visit Site, Documentation and some examples


I'll explain with an example:

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


<link rel="stylesheet" type="text/css" href="simptip.css" />


Then you can do something like this:

<span class="simptip-position-top" data-tooltip="Tooltip's content"> Text </span>

What you see in the data-tooltip attribute is the text content of the tooltips, and the value of class attribute is tooltop's position.

You can use .simptip-position-right , .simptip-position-bottom and .simptip-position-left class for other positions that you would like.

You can also use more features of Simptip by adding these classes:

  • .half-arrow : change tooltip's arrow to half arrow
  • .simptip-smooth : makes soft edge for tooltip
  • .simptip-fade : fades effect for show/hide
  • .simptip-movable : shows movable effect
  • .simptip-multiline : makes multiline body for tooltip
  • .simptip-success : changes color to green spectrum
  • .simptip-info : changes color to blue spectrum
  • .simptip-warning : changes color to orange spectrum
  • .simptip-danger : changes color to red spectrum
Let me know if you use it in your projects.


Copyright (c) 2013 Arash Manteghi

Licensed under the MIT license.