Form field hints/tooltips?

Get Started
1

I was trying to figure out what the best method to approach this was.

On a form I’m working on, most form fields have a tooltip I’d like to display for additional information/explanation of what the field is for.

However, I’m running into the problem of placement of the “?” icon and keeping the form free of too much clutter.

Here’s some variations I was deliberating over:

[URL=“http://img691.imageshack.us/i/71488968.jpg/”][URL=“http://img525.imageshack.us/i/47539270.jpg/”][URL=“http://img682.imageshack.us/i/35932698.jpg/”][URL=“http://img339.imageshack.us/i/18404481.jpg/”][URL=“http://img715.imageshack.us/i/62969563.jpg/”]

These are just showing text fields. I’ll also be using textareas, drop-downs, checkboxes, and radio buttons in a similar way.

Any suggestions? Thoughts? Options that aren’t in the screenshots?

2

I assume the fifth one is what it would look like with the sixth one being what it looks like on hover. I like that one the best. Another way to do it is if one field has an error you can color the form field background or border red…

3

Right, the 6th one is with the tooltip showing, the 5th is without.

I had originally positioned the info icon to the right of the field, but there’s two issues:

For form fields that are different sizes or change sizes, the info icon moves horizontally.

Then for textareas arranged like this, having the info icon to the right of the field made it seem left out: