jtip the jquery tooltip

Live Demo | Download code

ทูลทิป ไว้ใช้สำหรับแสดงคำอธิบายของอะไรสักอย่างที่อยู่บนหน้าเพจ แบบว่า พอเราเอาเมาส์ไปชี้ปุ๊บ มันก็จะแสดงคำอธิบายออกมาปั๊บ ไรเงี้ย ผมเองจะใช้มันประจำ เพราะบางครั้งหน้าเพจมันมีเนื้อที่จำกัด เลยต้องหาเทคนิคมาซ่อนรายละเอียดบางอย่างไว้ หรือบางทีผมก็ใช้สำหรับแสดงคำอธิบายวิธีป้อนข้อมูลในเท็กบ้อก ว่าคุณจะต้องใส่ข้อมูลรูปแบบไหน ตัวเลขอย่างเดียว หรือตัวหนังสือภาษาอังกฤษเท่านั้น เป็นต้น

ทูลทิปตัวที่ผมจะนำเสนอวันนี้ เป็นปลั๊กอินของ jQuery ซึ่งใช้งานง่ายมากๆ แค่ใช้คำสั่งไม่กี่บรรทัด เราก็จะได้ทูลทิป อันงดงามมาใช้ในเว็บของเรา เริ่มกันเลยดีกว่าครับ

1. ก่อนอื่นต้องดาวน์โหลด jtip มาก่อน Download

2. สร้างไฟล์ใหม่ แล้ว include jQuery และ jtip เข้ามา ดูพาธเอานะครับว่าผมเก็บไฟล์ไว้ยังไง

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtip.js" type="text/javascript"></script>

3. include CSS เข้ามา

<link rel="stylesheet" href="css/global.css" />

4. สร้างทูลทิปเท็กให้กับสิ่งที่เราต้องการ โดยโครงสร้างจะเป็นดังนี้

<a href="ajax.htm?width=375" class="jTip" id="one">?</a>
  • ใช้แท็ก a คร่อมตัวที่จะให้เกิด tooltip
  • href ชี้ไปยังไฟล์คำอธิบายที่ต้องการนำมาใส่ใน tooltip
  • parameter width สำหรับกำหนดความขนาดกว้างของ tooltip ถ้าท่านต้องการให้ jtip คำณวนของมันเอง ท่านลบตัวนี้ทิ้งได้ครับ
  • class จะต้องเป็น jTip
  • id ต้องมี และถ้าท่านใช้ ทูลทิปหลายที่ใน 1 เพจ ให้กำหนดชื่อไม่ซ้ำกัน (ตั้งชื่อว่าอะไรก็ได้ ไม่ต้องสนใจ แค่ไม่ให้ซ้ำกันเป็นพอ)

โค้ดทั้งหมดจะเป็นดังนี้

<html>
<head>
    <title>jTip - The Jquery Tool Tip</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jtip.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/global.css" />
</head>
<body>
    <a href="ajax.htm?width=375" class="jTip" id="one">?</a>
</body>
</html>

ถ้าท่านต้องการให้ทูลทิปของท่านมีหัวด้วย ให้ใส่ name เข้าไปในแท็ก a

<a href="ajax.htm?width=375" class="jTip" id="one" name="นี่คือหัวของทูลทิปจ่ะ">?</a>