Improving #SharePoint Forms – Hints

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:
[sourcecode language=”javascript”] <script type="text/javascript">
$("input[title=’Author’]").inputHintBox({
className:’simple_box’,
html:’Who is the author of this quote?’,
incrementLeft:-25,
incrementTop:-15
});
</script>
[/sourcecode]

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.
[sourcecode language=”css”] .simple_box{
border:1px solid gray; background:url(‘/_layouts/images/toolgrad.gif’);
font-size:xx-small; color:#444; padding:7px;
}
[/sourcecode]

Here it is in action.

hints

4 Responses

Add a Comment

Your email address will not be published. Required fields are marked *