https://github.com/egoist/data-tip.css
:barber: Wow, such tooltip, with pure css!
https://github.com/egoist/data-tip.css
Last synced: 8 months ago
JSON representation
:barber: Wow, such tooltip, with pure css!
- Host: GitHub
- URL: https://github.com/egoist/data-tip.css
- Owner: egoist
- Created: 2015-10-13T08:46:16.000Z (about 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2021-12-25T13:51:10.000Z (almost 4 years ago)
- Last Synced: 2025-03-29T20:23:18.619Z (8 months ago)
- Language: HTML
- Homepage: https://egoist.github.io/data-tip.css/
- Size: 27.3 KB
- Stars: 115
- Watchers: 4
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-frontend - data-tip.css - 纯 CSS 实现的工具提示
- awesome-frontend - data-tip.css - 纯 CSS 实现的工具提示
- awesome-front-end - data-tip.css - 纯 CSS 实现的工具提示
README
**Notice:** [hint.css](http://kushagragour.in/lab/hint/) has been much better since I complained about it months ago, so try out its new features instead of this one!
# data-tip.css
Wow, such tooltip, with pure css!
## Install
CDN: https://npmcdn.com/data-tip@latest
```bash
bower install data-tip
npm install data-tip
# additionally for Stylus lovers
# you can import data-tip.styl directly
@import '/path/to/data-tip'
```
## Usage
Simply write like this in your HTML:
```html
My Custom Button
```
Position your tip:
```html
data-tip-top
data-tip-bottom
data-tip-left
data-tip-right
```
Colorful your tip:
```html
data-tip-success
data-tip-warning
data-tip-danger
data-tip-info
```
Anti-animation:
```html
data-tip-no-animation
```
Rounded border:
```html
data-tip-rounded
```
Fast mode:
```html
data-tip-fast
```
Box with shadow:
```html
data-tip-shadow
```
Always visible:
```html
data-tip-visible
```
## Development
Update `data-tip.styl` to change styles
|command|description|
|---|---|
|npm install|install dependencies for dev|
|npm run build|build html and css files|
|npm run dev|build and watch file changes|
## Browser Support
Currently it works on IE 8+ and most modern browsers. It uses `autoprefixer` so just modify `gulpfile.babel.js` to suit your need.
## License
MIT.