« Read the original post for a breakdown of the code used for this effect
Just a quick way to add some additional style to your web forms using CSS3 as well as implementing form field hints without Javascript.
Hover over each input, the textarea and the submit button to see the hint.
Note that I did not apply a hint to the SELECT list but did add one to the submit button for kicks (not that I would urge you to use one for a submit button).
1. The effect does not work when you tab through the form.
2. It would be better to show the hints on focus instead of on hover, which would resolve the usability issue but I've had some problems in getting the other method to work across browsers. I might stick at it and see.
In the end, this is just an experiment and I do not recommend using this in practice.
Tested in: Firefox, IE 8, Google Chrome and Safari. The effect works in IE8 but without the CSS3 effects.
You are welcome to use and modify this script as you like. I'd appreciate a link back to my site.
Due to my need to focus on client support, i can't guarantee that I can respond to requests for help but you can email me at skyrocketlabs(at)gmail.com.
© 2009-2010 Skyrocket Labs