Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

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); }

About

A simple mixin tooltip CSS using Sass

Topics

Resources

Sponsor this project

Packages

No packages published

Languages