Add div above textbox without changing position of textbox

Question

I need to add some HTML content (images, labels, etc.) above a table cell that contains a text box. There are going to be at least 10 rows per page with 8 columns in each row. All 8 columns contain a text box.

I've already put together some jQuery that will show and hide this new content area above the table cell, but the CSS is not correct and the input boxes are getting pushed down... The content area that I'm referring to is the DIV being added by the jQuery plugin with the inputbanner class.

CSS

.inputbanner
{
    background-color: Orange;
    position: absolute;
    top: -20px;
    display: none;
}

HTML

<tr>
    <td class="itemdescr">
        SWR: 1123 My Biggest Project
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox" />
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
</tr>
<script language="javascript">
    $().ready(function() {
        $('.timebox').inputmenu();
    });
</script>

jQuery Function

(function($) {
    $.fn.inputmenu = function() {
        function createInputMenu(node) {
            $(node).bind('focus', function() {
                $(this).parent().toggleClass('highlight');
                $(this).prev('div.inputbanner').toggle();
            });
            $(node).bind('blur', function() {
                $(this).parent().toggleClass('highlight');
                $(this).prev('div.inputbanner').toggle();
            });
            $(node).parent().prepend('<div class="inputbanner"><img src="../../Content/Images/arrow_left_active.gif" />&nbsp<img src="../../Content/Images/arrow_left_inactive.gif" /></div>');
        }
        return this.each(function() {
            createInputMenu(this);
        });
    }
})(jQuery);

Answer 1

You should be able to adapt one of these example add-ons to fit your needs:

http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html

http://www.jankoatwarpspeed.com/post/2008/06/09/Building-a-better-web-forms-Context-highlighting-using-jQuery.aspx

http://letmehaveblog.blogspot.com/2007/08/easy-client-side-web-forms-validations.html