แสดงข้อความ Tooltip |
Tooltip คือ กล่องข้อความ สำหรับอธิบายรายละเอียดของข้อความ ที่มีขนาดสั้นหรือคลุมเครือยากต่อความเข้าใจ เราจะเห็น Tooltip ได้ทั่วไปของเอกสาร HTML โดยกำหนดที่ Attibute Title
เช่นใน Link Tag เราจะเขียนดังนี้ <a href="#" title="This is Tooltip">Tooltip</a> และ Tag อื่น เช่น div,span,p,h1,h2 เราก็สามารถสร้าง Tooltip ได้ใน Attribute Title ได้เช่นกัน
แต่ Tooltip ที่มีการแสดงผลแบบเดิมมันดูเชยไปหน่อยครับ ^_^’’ ผมก็เลยเอาjQueryมาประยุกต์ใช้ เพื่อใส่Effectให้มีการแสดงผลตามที่เราต้องการครับ ดูตัวอย่างได้จากที่นี่ครับ ตัวอย่าง Tooltip
ให้สร้างไฟล์ .html และให้ Copy Code นี้ไปใช้เลยครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $TtoolTip();//เรียกใช้ }); $TtoolTip=function(){//ทีทูลทิป ฟังก์ชั่น var titleName=''; $('.lnk').hover(function(e){ //Mouse Hover แอทริบิวต์ คลาส ชื่อ lnk titleName=this.title;//ดึงข้อความในแอททริบิว Title ของ Link this.title=''; $('body').append('<div class="showTooltip">'+titleName+'</div>'); var mousex = e.pageX + 10; var showTooltip=$('.showTooltip'); var mousey = e.pageY+10; var tooltipWidth = showTooltip.width(); var tooltipHeight = showTooltip.height(); var toolVisX = $(window).width() - (mousex + tooltipWidth); var toolVisY = ($(window).height()+$(window).scrollTop())-(mousey+tooltipHeight); if ( toolVisX < 10 ) { mousex = e.pageX - tooltipWidth - 10; } if ( toolVisY < 10 ) { mousey = e.pageY - tooltipHeight - 10; } showTooltip.css({ top: mousey, left: mousex,display:'none'}); showTooltip.slideDown(150); },function(){ //Mouse Out //$('.showTooltip').slideUp(20,function(){//http://api.jquery.com/slideUp/ $('.showTooltip').remove();//Remove Tooltip //}); this.title=titleName; }).mousemove(function(e){}); } </script> <title>สอนทำ Tooltip</title> <style type="text/css"> .showTooltip{ float:left; padding:10px; background:#9C3; border:1px solid #666; position:absolute; } </style> </head> <body> <div align="center"> <a href="#" title="นี้คือข้อความTooltip 1" class="lnk">แสดงข้อความTooltipในลิงค์ 1</a><!-- ต้องการให้แสดง Tooltip ต้องกำหนด class="lnk"--> <br /><a href="#" title="นี้คือข้อความTooltip 2" class="lnk">แสดงข้อความTooltipในลิงค์ 2</a><!-- ต้องการให้แสดง Tooltip ต้องกำหนด class="lnk"--> <br /><a href="#" title="นี้คือข้อความTooltip 3" class="lnk">แสดงข้อความTooltipในลิงค์ 3</a><!-- ต้องการให้แสดง Tooltip ต้องกำหนด class="lnk"--> <br /><a href="#" title="ข้อความธรรมดา">ไม่แสดงข้อความTooltip</a><!-- ไม่แสดง Tooltip--> </div> </body> </html>
วิธีเรียกใช้งานคือ
1. กำหนดข้อความใน Attribute Title เช่น title=”นี้คือข้อความ”
2. กำหนดชื่อ lnk เป็นชื่อคลาส คือ class=”lnk”
3.เรียกใช้ฟังก์ชั่น Tooltip คือ $TtoolTip();
วันนี้ขอเขียนบทความง่ายๆหน่อยนะครับ ^_^ หวังว่าท่านจะนำเนื้อหาในบทความนี้ ไปประยุกต์ใช้กับเว็บไซต์ของท่านได้นะครับ
ความรู้ใหม่มาอีกแล้วววว
ตอบลบขอบคุณครับ