Posts tagged: 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:

<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.

hints