 |
| แสดงข้อความ 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();
วันนี้ขอเขียนบทความง่ายๆหน่อยนะครับ ^_^ หวังว่าท่านจะนำเนื้อหาในบทความนี้ ไปประยุกต์ใช้กับเว็บไซต์ของท่านได้นะครับ
ความรู้ใหม่มาอีกแล้วววว
ตอบลบขอบคุณครับ