Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eliortabeka/tootik
A pure CSS/SCSS/LESS Tooltips library. Super easy to use, No JavaScript required.
https://github.com/eliortabeka/tootik
Last synced: 3 months ago
JSON representation
A pure CSS/SCSS/LESS Tooltips library. Super easy to use, No JavaScript required.
- Host: GitHub
- URL: https://github.com/eliortabeka/tootik
- Owner: eliortabeka
- License: mit
- Created: 2016-06-26T19:13:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-07T21:16:43.000Z (almost 7 years ago)
- Last Synced: 2024-07-31T18:19:44.633Z (6 months ago)
- Language: CSS
- Homepage: https://eliortabeka.github.io/tootik/
- Size: 2.57 MB
- Stars: 439
- Watchers: 13
- Forks: 78
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- Awesome-CSS-Resources - tootik:
README
## Tootik
A pure **CSS/SCSS/LESS Tooltip** library. Super easy to use, No JavaScript required.
### Tooltip Generator:
https://eliortabeka.github.io/tootik/
### Demo
https://eliortabeka.github.io/tootik/
### Installation
**CDN:**
```
https://unpkg.com/[email protected]/css/tootik.min.css
```
**Using npm:**
```
npm install tootik
```
**Using bower:**
```
bower install tootik
```
**Manually:**
Download `tootik.min.css` from this repo or from [demo site](https://eliortabeka.github.io/tootik/) and add it to your HTML. e.g.
```html
```
Define a **data-tootik** attribute in your element and let the magic happens.
```html
...
```
Additionally, you can define a **data-tootik-conf** attribute to either change position or use a feature.
```html
...
```
### Positioning
```html
Top
Right
Bottom
Left
```
### Types
```html
invert
success
info
warning
danger
```
### Features
```html
shadow
delay
multiline
no-fading
no-arrow
square
```
### Credit
Handcrafted with love by [Elior Shalev Tabeka](http://codepen.io/eliortabeka)
LESS syntax by [Elena Torro](https://github.com/elenatorro)