When users are asked to enter information in a form sometimes it helps to give them a hint regarding what types of information should be entered. Out of the box you can enter a description of each field that will be displayed. If you want something more dynamic here is how to do it.
- Add jQuery to the page using the method described in this post
- Download the jQuery Hint Box plugin and link it to the page.
- Call the script and set the options for the position and html content of the hint. Here is an example:
<script type="text/javascript"> $("input[title='Author']").inputHintBox({ className:'simple_box', html:'Who is the author of this quote?', incrementLeft:-25, incrementTop:-15 }); </script>
The above script simply selects the field using its title attribute then sets the css class for the element, its contents and position.
Here is the CSS I used for my example.
.simple_box{ border:1px solid gray; background:url('/_layouts/images/toolgrad.gif'); font-size:xx-small; color:#444; padding:7px; }
Here it is in action.