tool tip for error message

i have a error message using jquery. i want to apply z-index and come top on other elements.
in this example i want the error message to come on top of the hello word.
its going to the left, and not coming on top. pl help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
.error { float: left; color: red; padding-left: .5em; vertical-align: top; border:1px solid red; z-index:10000; }
.red { color:red; }
</style>
<script>
$(document).ready(function(){
  $("#commentForm").validate({
    rules: {
      username: "required"     
    },
    errorPlacement: function(err,el) {
      var br = $('<br>');
      $(el).before(br);
      err.insertBefore(br);
    }
  });
});
</script>   
</head>
<body>
  <form id="commentForm" method="get" action="">
        <table width="600" cellpadding="2" cellspacing="0">
        <tr><td colspan="2">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hellohellohellohello</td></tr>
		<tr>
            <td width="200px">Username<span class="req">*</span></td>
            <td width="400px"><input id="Username" type="text" name="username" size="25" minlength="2" /></td>
        </tr>       
     </table>           
     <input class="submit" type="submit" value="Submit"/> 
  </form>
</body>
</html>

Open in new window

yingwhoAsked:
Who is Participating?
 
gr8gonzoConsultantCommented:
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
.error { color: red; padding-left: .5em; vertical-align: top; border:1px solid red; z-index:10000; }
.red { color:red; }
</style>
<script>
$(document).ready(function(){
  $("#commentForm").validate({
    rules: {
      username: "required"     
    },
    errorPlacement: function(err,el) {
      err.appendTo($("#errorHolder"));
    }
  });
});
</script>   
</head>
<body>
  <form id="commentForm" method="get" action="">
        <table width="600" cellpadding="2" cellspacing="0">
        <tr><td colspan="2"><div id='errorHolder' style='clear:both'></div>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hellohellohellohello</td></tr>
		<tr>
            <td width="200px">Username<span class="req">*</span></td>
            <td width="400px"><input id="Username" type="text" name="username" size="25" minlength="2" /></td>
        </tr>       
     </table>           
     <input class="submit" type="submit" value="Submit"/> 
  </form>
</body>
</html>

Open in new window

0
 
yingwhoAuthor Commented:
gr8, thanks. but when i said error message should come on top of hello, it does not mean above.
what i meant was using z-index coming on top overlapping the hello just above the textbox.
0
 
David S.Commented:
z-index does nothing by itself. In this case, you probably want to use "position:absolute" with it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.