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>
<div class="helpBox">This is a helping box.</div>

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;}