egoist / Data Tip.css
💈 Wow, such tooltip, with pure css!
Stars: ✠117
Labels
Notice: hint.css 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/[email protected]
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
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].