Floating validation messages

Positioned validation or tooltip messages using only two files

Features

• Intended for use where space is an issue and in-page validation messages would break layout
• Fades gracefully when text is entered in field, or an option is selected, but vanishes instantly when closed
• Self sufficient - no JavaScript libraries required
• No images required, all CSS based - only two files: floatvalidation.js and floatvalidation.css
• CSS included dynamically - only one line of code needs adding to page
• Calculates position, doesn't require parent element to be position:relative;

Technical

• CSS3 rounded corners
• Webkit CSS RGBA gradients
• RGBA transparency
• Arrow rendered using canvas
• CSS images with data URLs

Future enhancements

• Validation functions - set validation for a field by adding a class name, eg: floatvalidation_postcode
• jQuery plugin version

Demo (submit form to see it in action)