如何用jquery弹出 一个Div，让其在文本框下面显示？

当某个文本框获得焦点时，让隐藏的 div 块显示出来，并控制其显示在该文本框的下面，该如何实现？

//-------------------------------javascript代码----------------------------
jQuery.fn.extend({
    showMessage:function(html){
        if($.trim(html)!=""){
            //wbx是弹出层的Css样式名，用于自定义Div层的外观，弹出位置为Dom元素的下方，透明度0.8，尺寸自适应html内容的尺寸
            var warndiv=$("<div></div>").addClass("wbx").html(html).css({position:"absolute",left:$(this).offset().left,top:$(this).offset().top+$(this).outerHeight(),zIndex:100}).hide().fadeTo(0,0.8);
            $("body").prepend(warndiv);
            //下面这段的作用是使信息弹出并停留3秒后淡出，如不需要请移除
            warndiv.show("fast").animate({opacity:0.8}, 3000).fadeOut('slow',function(){$(this).remove();});
        }
    }
});

----------------------------------以下是一些用法---------------------------------
<!--textbox示例：当textbox被聚焦时，在textbox下方显示文字提示-->
<input id="mytextbox" type="textbox" />
<script type="text/javascript">$("#mytextbox").focus(function(){$(this).showMessage("请输入内容");});</script>
<!--button示例：当鼠标移至button上方时，在button下方显示文字提示-->
<input id="mybutton" type="button" />
<script type="text/javascript">$("#mybutton").mouseover(function(){$(this).showMessage("请点击按钮提交");});</script>