Adding helping boxes using jQuery ui plugin

Once you have installed jQuery and Jquery UI, we can add some helpBox divs to our html like this:

<asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="desc required" ></asp:TextBox>
This is a helping box.

Then set a javascript to position the boxes and show them only on focusing the previous item:

function setHelpingBoxes() {

$('.helpBox').each(function () {
$(this).position({
of: $(this).prev(),
my: "left center",
at: "right center",
offset: "10 0"
});
$(this).hide(0);
$(this).prev().focus(function () {
$(this).next().show(300);
});
$(this).prev().focusout(function () {
$(this).next().hide(200);
});
});

}

And finally, don’t forget to add the styles!

.helpBox{width: 150px;padding:5px;position: absolute;display: block;right: 0;background-color: #bcd5e6;text-align: center;}