Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one!

Wow, such tooltip, with pure css!

CDN: https://npmcdn.com/data-tip@latest

bower install data-tip
npm install data-tip

# additionally for Stylus lovers
# you can import data-tip.styl directly
@import '/path/to/data-tip'

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

Update data-tip.styl to change styles

Currently it works on IE 8+ and most modern browsers. It uses autoprefixer so just modify gulpfile.babel.js to suit your need.

MIT.