Skip to content
A simple mixin tooltip CSS using Sass
CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
src
README.md
package.json
sache.json

README.md

Tipsy.sass

A mixin tooltip CSS using Sass. It currently support Internet Explorer 9+, Chrome, Firefox, Safari and Opera

Installation

NPM

$ npm install tipsy-sass

Normal

Getting Started

You need import Tipsy.sass in your stylesheet

@import "tipsy";

Tipsy.sass have 5 parameters allow you can customize

SCSS

@mixin tipsy($gravity, $bgcolor, $bordersize, $radius, $width) {...}

SASS

+tipsy($gravity, $bgcolor, $bordersize, $radius, $width)

PARAMETERS

Param Description Value
$gravity Position of tooltip nw
$bgcolor Background color of tooltip HEX, RGB, RGBA, HSL
$bordersize Arrow size of tooltip px, em, rem
$radius Border radius of tooltip px, em, rem
$width Width of tooltip px, em, rem

How to use

HTML

<span class="tipsy" data-tipsy="Simple Tipsy">Simple Tipsy</span>

SCSS

.tipsy--nw { @include tipsy(nw, #34495e, 5px, 0);  }
.tipsy--n  { @include tipsy(n, #2ecc71, 5px, 3px); }
.tipsy--ne { @include tipsy(ne, #3498db, 5px, 0);  }
.tipsy--e  { @include tipsy(e, #9b59b6, 5px, 3px); }
.tipsy--se { @include tipsy(se, #f39c12, 5px, 0);  }
.tipsy--s  { @include tipsy(s, #d35400, 5px, 3px); }
.tipsy--sw { @include tipsy(sw, #c0392b, 5px, 0);  }
.tipsy--w  { @include tipsy(w, #8e44ad, 5px, 3px, 10px); }
You can’t perform that action at this time.