<div role="application">
<h2>Create Account</h2>

  <div class="text">
     <label for="first">First Name:</label>
   <input type="text"
       id="first"
         name="first"
         size="20"
         aria-describedby="tp1"
     aria-required="false"
    />
     <div id="tp1" role="tooltip">Your first name is a optional</div>
  </div>

  <div class="text">
     <label for="last">Last Name: </label>
   <input type="text"
       id="last"
         name="last"
         size="30"
         aria-describedby="tp2"
     aria-required="false"
    /> *
     <div id="tp2" role="tooltip">Your last name is a optional</div>
  </div>

  <div class="text">
     <label for="last">E-mail: </label>
   <input type="text"
       id="email"
         name="email"
         size="40"
         aria-describedby="tp3"
     aria-required="true"
    /> *
     <div id="tp3" role="tooltip">Your e-mail address will be your login name</div>
  </div>

  <div class="text">
     <label for="last">Password: </label>
   <input type="password"
          id="password"
            name="password"
            size="20"
      aria-describedby="tp4"
     aria-required="true"
    /> *
     <div id="tp4" role="tooltip">Password must be at least 8 character long and contain at least one capitol letter and a number</div>
  </div>
  
  <div class="text">
     <label for="last">Password Confirm: </label>
   <input type="password"
          id="confirm"
            name="confirm"
            size="20"
      aria-describedby="tp5"
        aria-required="true"
    /> *

     <div id="tp5" role="tooltip">Confirmation password must match password</div>
  </div>
    
  
  <input type="submit" value="Create Account"/>



</div>

  <script type="text/javascript">
var KEY_ESC = 27;

$(document).ready(
   function() {
     $('div.text input').focus(
       function() {
      
         $(this).siblings('div').css('display', 'inline');
        
       } // end focus event function
     ); // end focus event handler

     $('div.text input').blur(
       function() {
      
         $(this).siblings('div').css('display', 'none');
        
       } // end blur event function
     ); // end blur event handler

     $('div.text input').mouseover(
       function() {
      
         $(this).siblings('div').css('display', 'inline');
        
       } // end mouseover event function
     ); // end mouseover event handler

     $('div.text input').mouseout(
       function() {
      
         $(this).siblings('div').css('display', 'none');
        
       } // end mouseout event function
     ); // end mouseout event handler

     $('div.text input').keydown(
       function(e) {
              
         if( e.keyCode == KEY_ESC ) {
           $(this).siblings('div').css('display', 'none');
           e.stopPropagation();
           e.preventDefault();
           return false;
         } // endif
         return true;
       } // endif keydown event handler function
    
     ); // end keydown event handler
  
   }  // end ready function
  
); // end ready event  </script>

  <style type="text/css">
[role="tooltip"] {
  display: none;
  border: medium black solid;
  padding: .25em;
  width: 25em;
  background: #CCCCCC;
}

div.text label {
   margin: 0;
   padding: 0;
   padding-right: .25em;
   width: 10em;
   text-align: right;
   clear: both;
   float: left;
}

div.text {
   margin: .5em;
}

input[type=submit] {
   clear: both;
   padding: 0;
   margin: 0;
   margin-top: .5em;
   margin-left: 13em;
}
  </style>