PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

14 March 2009 By Ninenik Narkdee
tooltip ข้อความ jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ 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">กรอกอีเมลล์ของคุณที่นี้ ตัวอย่างอีเมลล์  music@hotmail.com</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>

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

E-mail กรอกอีเมลล์ของคุณที่นี้ ตัวอย่างอีเมลล์ music@hotmail.com





Tags:: jquery ข้อความ tooltip






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง