0.0.52 • Published 9 years ago
data-tip v0.0.52
data-tip.css
Wow, such tooltip, with pure css!
Install
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:
<button class="data-tip-bottom" data-tip="Tips To Show">
My Custom Button
</button>
Position your tip:
data-tip-top
data-tip-bottom
data-tip-left
data-tip-right
Colorful your tip:
data-tip-success
data-tip-warning
data-tip-danger
data-tip-info
Anti-animation:
data-tip-no-animation
Rounded border:
data-tip-rounded
Fast mode:
data-tip-fast
Box with shadow:
data-tip-shadow
Always visible:
data-tip-visible
Why not hint.css?
hint.css is another great tooltip library, but it looks exactly like this:
While I prefer to see that arrow in the center ;)
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.