สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeejquery tooltip ข้อความ
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery tooltip ข้อความ
ดูแล้ว 21,140 ครั้ง
ไปที่
Copy
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 สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ