The acceptable values are:
normal | none | [ string | uri | counter | attr(identifier) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor.
On the other hand, having to include two classes seems sloppy. Why not just roll the core styles into the position classes, or include a default position in the 'hint' class?
Double dashes in class names are also annoying.
I just took a quick look at it, and it seems like a nice tooltip library.
It's fine if you have a mostly static page, so you can initialize all fo them on domready.
It's costly and error prone. This pure CSS solution in the other hand do not require any initialization. You put the HTML with the proper classes and it will just works.
Edit- I misunderstood how this works, I thought you actually had to add <span>s (extra markup) but it seems not! This is really great!
My only complaint is that it messes with elements if you're doing the :before/after thing for font icons.
I created something extremely similar a few months back for my day job (wow the traffic I missed out on!).
One thing I've encountered in this and in my own implementation: the hint gets blocked by iframe if it's nearby. Has anyone figured out a way to reliably have it appear over the iframe instead of under? I've been struggling with it for a while and have not figured it out.
I would say that they should only be used for styling and not functionality.
I'm sure there are some other caveats that would reveal themselves later even if this one is avoidable...
just the tip!