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

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
ข้อความ tooltip jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ tooltip jquery

ดูแล้ว 21,141 ครั้ง


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


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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ