エラーメッセージをツールチップとして表示するにはどうすればよいですか？

Question

私は以下のリンクに示すように、ツールチップとしてエラーメッセージを表示しようとしていますが、それは私のためには機能しません。私にエラーの内容を教えてください。 私が直面しているエラーは、テーブルの外側に表示される要素の横に表示されるのではなく、ツールチップのエラーメッセージです。

jQuery override default validation error message display (Css) Popup/Tooltip like

私はここに私のコードを掲載しています：

<table border="0" cellpadding="1" cellspacing="1" width="100%"> 
<tr> 
<td colspan="4">MAIN DETAILS 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Launch Number: 
</td> 
<td class="TCDetail_Item">[LaunchID] 
</td> 
<td class="TCDetail_Title"> 
</td> 
<td class="TCDetail_Item"> 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Client: 
</td> 
<td class="TCDetail_Item">[CustName] 
</td> 
<td class="TCDetail_Title">Job Number: 
</td> 
<td class="TCDetail_Item">[JobID]-[DashID] 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Supplier: 
</td> 
<td class="TCDetail_Item">[SuppName] 
</td> 
<td class="TCDetail_Title">Supplier Code: 
</td> 
<td class="TCDetail_Item">[SupplierID] 
</td> 
</tr> 
<tr> 
<td class="TCDetail_Title">Service Date: 
</td> 
<td class="TCDetail_Item"><input type="text" class="clr" size="8" name="frmServiceDate" id="frmServiceDate" value="[DateScheduled]" class="Sdate"> 
</td> 
<td class="TCDetail_Title">Activity: 
</td> 
<td class="TCDetail_Item"> 
<select name="frmActivityType" id="frmActivityType"> 
<option value='' selected=''>PleaseSelect..</option> 
<option value='1'>Inspect</option> 
<option value='2'>Audit</option> 
</select> 
</td> 
</tr> 
<tr> 
     <td colspan="4"> 
      <div class="buttons"> 
       <button onclick="checkall();">Submit Timecard</button> 
       <button>Cancel</button> 
      </div> 
     </td> 
</tr> 
</table> 

jQueryのスクリプトを：

<script type="text/javascript"> 
$.validator.addMethod(
"Sdate", 
function (value, element) { 

var nowdate=new Date(); 
if(Date.parse(value) < 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); 
} 
}); 
}); 
</script> 

とCSSスタイルブロック：

<style> 
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; 
} 
</style> 

私はfollwed リンク事前に3210の

おかげで、 Sravanthiあなたは次の要素にエラーメッセージを配置するためのjQuery UI Postion APIを使用することができます

Answer 1

、

Link to JQuery UI Position API

はそれがお役に立てば幸いです。