Wow, such tooltip, with pure css!

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

hint.css is another great tooltip library, but it looks exactly like this:

While I prefer to see that arrow in the center ;)

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.