tipsy-sass
v1.0.7
Published
A Simple Mixin Tooltip CSS Using Sass
Downloads
108
Readme
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
- Clone
[email protected]:dangvanthanh/tipsy.sass.git
- Download the latest version
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 | n | ne | e | se | s | sw | w |
| $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); }