jQuery Validation Tooltip

jQuery Validation Tooltip

When my text input doesn't validate as an email address I want a tooltip to show. The jQuery code below doesn't work. Can anyone help me with this?

<script language="javascript" type="text/javascript">
 
$(document).ready(function() {

$('.email').focusout(function(){

              $('.email').filter(function(){
              var emil=$('.email').val();
              var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if( !emailReg.test( emil ) ) {
$(this).tooltip({
  content: "<div style=\"position: relative; top: -20px; right: -500px; background-color: #444; padding: 6px; width: 180px; height: 60px; color: #fff;\">Please enter a valid email address.</div>"});
                }
                })
            });

});

</script>


<input type="email" class="ui-tooltip-content email" id="tooltip-1" name="tooltip-1" size="61">