ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery

โค้ดด้านล่าง เป็นการประยุกต์ เพิ่ม เดิมจากหัวข้อ

http://www.ninenik.com/สร้าง_tooltip_กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย_jQuery-178.html

ซึ่งงมีข้อจำกัด ที่สามารถกำหนด ได้เพียง 1 ตัว

ตัวอย่าง พร้อมโค้ดข้างล่างต่อไปนี้ มีลักษณะ การใช้งาน โดยการกำหนด title ให้กับ input element ที่เราต้องการ
แล้วให้ jQuery เรียกค่านั้นมาแสดงในส่วน สำหรับแสดงค่า tooltip เมื่อนำเมาส์ไปอยู่เหนือรูปตัวช่วยเหลือ ที่อยู่หลัง
input element นั้นๆ ในที่นี้ให้สังเกตว่า รูปจะอยู่หลัง input element โดยไม่มี tag อื่นไดมาคั่น ทั้งนี้เพื่อให้เป็น
ไปตามเงื่อนสำหรับการแสดงผล ซึ่งสามารถประยุกต์เป็นอย่างอื่นได้ ตามความต้องการและเหมาะสม

ตัวอย่าง

E-mail
Name:
Sex: ชาย หญิง
Address:

HTML Code

E-mail
  <input type="text" name="input_email" id="input_email" title="กรอกอีเมลล์ของคุณที่นี้ ตัวอย่างอีเมลล์  music@hotmail.com" />
<img src="iHelp.png" width="20" height="20" class="iHelp" /><br />
Name:
<input type="text" name="input_email" id="input_email" title="กรอกชื่อของท่าน" />
<img src="iHelp.png" width="20" height="20" class="iHelp" /><br />
Sex:
<select name="input_sex" id="input_sex" title="เลือกเพศ">
  <option value="1">ชาย</option>
  <option value="2">หญิง</option>
</select>
<img src="iHelp.png" width="20" height="20" class="iHelp" /><br />

Address:<br />
<textarea name="textarea" id="textarea" cols="45" rows="5" title="กรอกที่อยู่ของท่าน"></textarea>
<img src="iHelp.png" width="20" height="20" class="iHelp" />

<!-- ส่วนสำหรับนำข้อความตัวช่วยเหลือมาแสดง -->
<span class='iTooltip' id="infoEmail"></span>

CSS Code

<style type="text/css"> 
/* css สำหรับกำหนดรูปแบบของกล่องข้อความ Tooltip */
.iTooltip{
	position:absolute;
	border:1px solid #FFCC66;
	background-color:#FFFFCC;
	color:#000000;
	display:none;
	padding:5px;
/*	width:200px;*/
	font-size:12px;
}
</style>

Javascript Code

<script language="javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("img.iHelp").hover(function(event){ // img#iHelp คือ แท็ก img ที่มี id เท่ากับ iHelp
		callTooltip("#infoEmail",event,$(this).prev("input,textarea,select").attr("title")); 
	},function(){
		$("#infoEmail").hide();
	});

});
function callTooltip(obj,event,strText){ // ฟังก์ชั่นแสดงกล่องข้อความ Tooltip
		var locateX=event.pageX;   
        var locateY=event.pageY; 
		locateX+=10;
		locateY+=10;
		$(obj).show().css({
			left:locateX,
			top:locateY
		}).html(strText);				
}
</script>