Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dangvanthanh/tipsy.sass
A simple mixin tooltip CSS using Sass
https://github.com/dangvanthanh/tipsy.sass
css sass tooltip
Last synced: 19 days ago
JSON representation
A simple mixin tooltip CSS using Sass
- Host: GitHub
- URL: https://github.com/dangvanthanh/tipsy.sass
- Owner: dangvanthanh
- Created: 2014-03-11T03:43:14.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-04T04:21:23.000Z (over 5 years ago)
- Last Synced: 2024-04-30T05:22:47.969Z (7 months ago)
- Topics: css, sass, tooltip
- Language: CSS
- Homepage:
- Size: 2.88 MB
- Stars: 53
- Watchers: 4
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Tipsy.sass
> A mixin tooltip CSS using Sass. It currently support Internet Explorer 9+, Chrome, Firefox, Safari and Opera
## Installation
### NPM
```shell
$ npm install tipsy-sass
```
### Normal
* Clone ``[email protected]:dangvanthanh/tipsy.sass.git``
* [Download the latest version](https://github.com/dangvanthanh/tipsy.sass/archive/master.zip)
## Getting Started
### You need import Tipsy.sass in your stylesheet
```scss
@import "tipsy";
```
### Tipsy.sass have 5 parameters allow you can customize
**SCSS**
```scss
@mixin tipsy($gravity, $bgcolor, $bordersize, $radius, $width) {...}
```
**SASS**
```scss
+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
```html
Simple Tipsy
```
#### SCSS
```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); }
```