Tooltips in pure CSS

Edit:
This is now a complete library. Check it out: http://kushagragour.in/lab/hint/

Recently started writing a library for creating tooltips in pure CSS.

It is very basic at the moment but the demo can be seen here (works best Firefox): http://codepen.io/chinchang/full/lICaq

The tooltips are created using after & before pseudo elements and hence no extra markup is required.
All you need to do is give the appropriate class and put your tooltip text in data-hint attribute.

The data attribute value is populated in the content property using the attr function in CSS:

content: attr(data-hint);

Note: Transitions on pseudo elements currently work in Firefox only, so the demo is best viewed in Firefox (though it will work in other browsers as well).