title: how to display the error message as a tooltip?
body: <p>I am trying to display an error message as a tooltip as shown in the link below but that doesn't work for me.Please let me know what would the error be.
  The error i am facing is the tooltip error message  instead of showing  beside the element it shows up some where outside the table.
  Link  i follwed:</p>
  
  <p><a href="https://stackoverflow.com/questions/860055/jquery-override-default-validation-error-message-display-css-popup-tooltip-lik">jQuery override default validation error message display (Css) Popup/Tooltip like</a></p>
  
  <p>I am posting my code here:</p>
  
  <pre><code>&lt;table border="0" cellpadding="1" cellspacing="1" width="100%"&gt;
  &lt;tr&gt;
  &lt;td colspan="4"&gt;MAIN DETAILS
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="TCDetail_Title"&gt;Launch Number:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;[LaunchID]
  &lt;/td&gt;
  &lt;td class="TCDetail_Title"&gt;
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="TCDetail_Title"&gt;Client:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;[CustName]
  &lt;/td&gt;
  &lt;td class="TCDetail_Title"&gt;Job Number:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;[JobID]-[DashID]
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="TCDetail_Title"&gt;Supplier:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;[SuppName]
  &lt;/td&gt;
  &lt;td class="TCDetail_Title"&gt;Supplier Code:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;[SupplierID]
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="TCDetail_Title"&gt;Service Date:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;&lt;input type="text" class="clr" size="8" name="frmServiceDate" id="frmServiceDate" value="[DateScheduled]" class="Sdate"&gt;
  &lt;/td&gt;
  &lt;td class="TCDetail_Title"&gt;Activity:
  &lt;/td&gt;
  &lt;td class="TCDetail_Item"&gt;
  &lt;select name="frmActivityType" id="frmActivityType"&gt;
  &lt;option value='' selected=''&gt;PleaseSelect..&lt;/option&gt;
  &lt;option value='1'&gt;Inspect&lt;/option&gt;
  &lt;option value='2'&gt;Audit&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
          &lt;td colspan="4"&gt;
              &lt;div class="buttons"&gt;
                  &lt;button onclick="checkall();"&gt;Submit Timecard&lt;/button&gt;
                  &lt;button&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Jquery script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $.validator.addMethod(
  "Sdate",
  function (value, element) {
  
  var nowdate=new Date();
  if(Date.parse(value) &lt; Date.parse(nowdate))
  return (Date.parse(value));
  
  },
  "Service Date should not be greater than todays Date."
  );
  $(document).ready(function(){
  
  $("#Form").validate({
  rules:
  {
  frmActivityType : "required",
  frmServiceDate :
  {
  required: true,
  date: true,
  Sdate:true
  }
  },
  errorElement: "div",
  wrapper: "div", // a wrapper around the error message
  errorPlacement: function(error, element) {
  offset = element.offset();
  error.insertAfter(element)
  error.addClass('message'); // add a class to the wrapper
  error.css('position', 'absolute');
  error.css('left', offset.left + element.outerWidth());
  error.css('top', offset.top);
  }
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and the CSS style block:</p>
  
  <pre><code>&lt;style&gt;
  div.message{
  background: transparent url(msg_arrow.gif) no-repeat scroll left center;
  padding-left: 7px;
  }
  
  div.error{
  background-color:#F3E6E6;
  border-color: #924949;
  border-style: solid solid solid none;
  border-width: 2px;
  padding: 5px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Thanks in Advance,
  Sravanthi</p>