สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery

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>

HTML Code ตัวอย่าง

  E-mail
  <input type="text" name="textfield" />
<!--  รูปภาพตัวช่วยเหลือ มี id เท่ากับ iHelp สำหรับใช้ใน jQuery-->
  <img src="iHelp.png" width="20" height="20" id="iHelp" />

<!--ข้อความตัวช่วยเหลือ กำหนด id เพื่อใช้ใน jQuery จะแสดงเมื่อเรียกใช้งานฟังก์ชัน-->
<span class='iTooltip' id="infoEmail">กรอกอีเมลล์ของคุณที่นี้ ตัวอย่างอีเมลล์  [email protected]</span>

Javascript Code ตัวอย่าง

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("img#iHelp").hover(function(event){ // img#iHelp คือ แท็ก img ที่มี id เท่ากับ iHelp
		callTooltip("#infoEmail",event); // infoEmail คือ id ของ แท็ก span ของข้อความที่ต้องการแสดง
	},function(){
		$("#infoEmail").hide();
	});

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

ตัวอย่าง เลือนเม้าส์ไปที่รูปตัวช่วยหลือ