มาสร้าง Tool tip ใส่ในเว็บของเราแบบเรียกใช้งานง่ายๆ : Javascript
 

Blog :: Javascript :: มาสร้าง Tool tip ใส่ในเว็บของเราแบบเรียกใช้งานง่ายๆ

วันนี้ลองนั่งเขียนให้ JS ทำงานร่วม mouse ลองเล่นไปเล่นมา ลองพยายามเขียนให้มันทำงานได้บนทุกเบราเซอร์ (web development มันเหนื่อยตรงนี้แหละ !! ) พอเล่นไปเล่นมาก็เลยลองทำ tool tip แบบเรียกใช้งานสะดวกๆ ง่ายๆ ใช้งานโดยประกาศเพียง class ขึ้นมาใน element คั่นด้วยเครื่องหมาย "|" แล้วตามด้วยข้อความที่จะให้แสดง ยกตัวอย่างเช่น

<a class="tooltip|sometexts in tooltip" href="#">Link</a>

ซึ่งเมื่อเอา cursor ไปวางที่ลิงก์นี้ มันก็จะแสดงข้อความขึ้นมาว่า "sometexts in tool tip" เป็นต้น
ทีนี้ลองมาดูสคริปต์กันเลย  โดยเริ่มจากในส่วนของ Javascript

############# Javascript #############
//ฟังก์ชั่นเอาไว้ดึงค่า Element
function $(elmId){
return document.getElementById(elmId);
}
 
//ฟังก์ชั่น สร้างกล่อง Tool tip
var mouseX = 0 ,mouseY = 0;
function tooltipBox(x,y,text){
$("tooltip").style.left = x+10+'px'; //ตำแหน่ง x อ้างอิงจาก style.left โดยจะเลื่อนมาทางขวางห่างจากหัว cursor 10px
$("tooltip").style.top = y+20+'px';//ตำแหน่ง y อ้างอิงจาก style.top โดยจะเลื่อนลงมาข้างล่างห่างจากหัว cursor 20px
  $("tooltip").style.display = 'block'; //ให้แสดงกล่อง tool tip
  $("tooltip").innerHTML = text; //ข้อความที่ให้ปรากฏใน tool tip
}
 
//ฟังก์ในการกำหนดการทำงานของ tool tip
function tooltip(e){
  //ดึงค่าตำแหน่งบนหน้าจอในจุดที่ cursor กำลังชี้อยู่
var e = e || window.event;
  if(e.clientX || e.clientY){
  mouseX = e.clientX + document.body.scrollLeft;
  mouseY = e.clientY + document.body.scrollTop;
  }else if(e.pageX || e.pageY){
  mouseX = e.pageX;
  mouseY = e.pageY;
  }
  //ตรวจสอบว่ามีการกำหนด class ไว้หรือไม่
var target = e.target.className || e.srcElement.className;
  if(target){
    var sptarget = target.split("|");
    if(sptarget[0] == "tooltip"){ //ตรวจสอบว่า class ก่อนเครื่อง "|" คือคำว่า tooltip หรือไม่
    tooltipBox (mouseX,mouseY,sptarget[1]);
      //แสดงกล่อง tool tip โดยเรียก function tooltipBox ด้านบนมา กำหนดแกน x,y และข้อความที่จะให้แสดง
    }
  }
}
//ฟังก์ชันเริ่มการทำงาน
function init(){
var body = document.getElementsByTagName("body")[0];
  var divtt = document.createElement("div");
 divtt.id = "tooltip";
  body.appendChild(divtt);
//สร้าง กล่อง tooltip ที่มี id เท่ากับ tooltip ขึ้นมา
document.onmousemove = tooltip; //ถ้า cursor เลื่อนไปยังelement ที่มีการประกาศ class tooltip เอาไว้จะเรียกฟังก์ชัน tooltip มาทำงาน
  document.onmouseout = function(){
    $("tooltip").style.display = 'none';
    //ในทางกลับกันถ้า cursor เลื่อนออกจาก element ก็จะซ่อนกล่อง tool tip ทันที
  };
}
 
init(); //เรียกใช้ ฟังก์ชัน init
############# End: Javascript #############

ต่อเป็นในส่วนของ css ในการกำหนดรูปแบบของ tool tip
############# CSS #############
#tooltip{
 font-family:'Arial','Helvetica';
 font-size:small;
border:1px dotted #CC3366;
 padding:5px;
width:auto; 
height:auto;
 max-width:100px;/*กำหนดความกว้างสูงสุด 100px*/
 background-color:#CC4455;
 color:#FFFFFF;
 display:none; /*กำหนดให้ div #tooltip ซ่อนเอาไว้ก่อน*/
 position:absolute; /*position ต้องเป็น absolute*/
 border-radius:5px;
 opacity:0.7;
}
#############End: CSS #############

การเรียกใช้งานก็ทำได้ง่ายๆ
โดยเพิ่ม class = "
tooltip|ข้อความที่จะให้แสดง" ลงไปใน element นั้นๆ
เช่น

<button class="tooltip|นี่คือปุ่มกรุณาคลิก">คลิก!!!</button>
<a href="#" class="tooltip|Go to the hell!!">Link</a>


ลองดูผลการทำงานผ่าน JSBin ตามลิงก์นี้ http://jsbin.com/aqovil/1/edit

ปล. ผมยังเขียนโค้ดไม่รัดกุมซักเท่าไหร่หากใครจะลองนำไปใช้ลองปรับๆ ดู
ปล2.  จะว่าไปถ้าจะนำไปใช้เลยก็ไม่ต้องปรับเปลี่ยนอะไรมากนอกจากในส่วนของ css

ขอให้สนุกกับ javascript ครับ :-)

1 Comment

  • Nuttapong Suptawepong
    #1 Comment By Nuttapong Suptawepong เมื่อ 3 เมษายน 2013 เวลา 9 นาฬิกา 43 นาที
    สุดเยอดครับ.
     

Comment Blog

 
 
 
Share This Topic Login with Facebook