jTip - The Jquery Tool Tip

Live Demo

ผมได้เคยแนะนำ jquery plugin ตัวนี้ไปทีนึงแล้ว jquery-tooltips มาคราวนี้ผมจะแสดงวิธีการนำ jTip ไปใช้งาน

jTip นี้จะใช้คุณสมบัติ AJAX ในการไปดึงข้อความจากอีกไฟล์หนึ่ง มาแสดงเป็นทูลทิป เพราะฉะนั้น เนื้อหาของทูลทิปก็จะเขียนแยกออกเป็นไฟล์ ซึ่งในแง่การใช้งานแล้ว ผมว่าวิธีนี้ดีมากๆ เพราะเมื่อเราจะแก้เนื้อหาของทูลทิปใดๆ เราก็เปิดไฟล์ html นั้นขึ้นมาแก้เท่านั้นเอง โดยไม่ต้องเข้าไปยุ่งเกี่ยวกับโค้ด ที่เคยเขียนไว้เลย

การใช้ทูลทิปเพื่อเป็นตัวช่วยเหลือ ในการป้อนข้อมูลในฟอร์ม หรือในงานอื่นๆ ผมว่าเป็นประโยชน์อย่างยิ่ง ช่วยป้องกันการป้อนข้อมูลที่ไม่ถูกต้อง หรือเป็นแนวในการป้อนข้อมูล ต้องอย่าลืมว่าเมื่อเราทำเว็บขึ้นมาสักตัว แล้วถ้ายิ่งเว็บนั้นมีฟอร์มให้ป้อนข้อมูลด้วยแล้ว ยูสเซ่อร์จะมึนมาก แค่ป้อนเบอร์โทรศัพท์นี่ ยังมีรูปแบบในการตั้งหลายรูปแบบ 022230016 , 02-223-0016, 02 223 0016 ดูดู๊ดู ดูเธอทำ นำทางเขาซะเขาจะได้ไปถูกทางตามที่เราหวัง (พูดเหมือนเลี้ยงลูกเลยเนอะ)

เริ่มเลยละกัน

ก่อนอื่นให้ท่านไปดาวน์โหลดไฟล์ jTip มาก่อน Download

เมื่อท่านแตกซิปออก ท่านน่าจะได้เจออะไรประมาณนี้

  • โฟลเดอร์ js เก็บไฟล์ jquery และ jtip
  • โฟลเดอร์ images เก็บภาพที่ jtip ต้องใช้
  • โฟลเดอร์ css เก็บไฟล์ css ที่ jtip ต้องใช้
  • ส่วนไฟล์ที่อยู่ระเกะระกะด้านนอกทั้งหมดนั้น เป็นไฟล์ตัวอย่าง ลองดับเบิลคลิก index.htm ดูสิ

เขียนโค้ดกัน ก่อนอื่นก็ต้อง include ไฟล์ที่จำเป็นเข้ามาก่อน

<script type="text/javascript" src="jquery-tooltip/js/jquery.js"></script>
<script type="text/javascript" src="jquery-tooltip/js/jtip.js"></script>
<link rel="stylesheet" href="jquery-tooltip/css/global.css" />

ตรงไหนที่เราต้องการให้เมื่อเอาเมาส์ไปชี้แล้วแสดง tooltip ให้เอาแท็ก a ที่ชี้ไปยังไฟล์เนื้อหาทูลทิป ระบุคลาสเป็น class=”jTip” และสิ่งที่ห้ามลืมโดยเด็ดขาดคือ id ค่าท่านจะใส่เป็นอะไรก็ได้ ถ้าท่านใช้ tooltip หลายตัวในหนึ่งหน้า id ของแต่ละตัวต้องต่างกัน อาจจะระบุเป็น one,two,three … ก็ได้

<a href="jquery-tooltip/yahoo.htm" class="jTip" id="one">?</a>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jTip</title>
<script type="text/javascript" src="jquery-tooltip/js/jquery.js"></script>
<script type="text/javascript" src="jquery-tooltip/js/jtip.js"></script>
<link rel="stylesheet" href="jquery-tooltip/css/global.css" />
</head>
<body>
<a href="jquery-tooltip/yahoo.htm" class="jTip" id="one">?</a>
</body>
</html>

ถ้าต้องการให้ทูลทิปแสดง title ด้วยให้ใส่ name ให้ลิ้งก์

<a href="jquery-tooltip/yahoo.htm" class="jTip" id="one" name="Window caption or title">?</a>

ถ้าคุณต้องการกำหนดความกว้างของทูลทิปเองตามใจชอบ ให้ส่งพารามิเตอร์ width เข้าไป

<a href="jquery-tooltip/yahoo.htm?width=375" class="jTip" id="one" name="Window caption or title">?</a>

ดาวน์โหลดโค้ดตัวอย่าง

class jQuery jquery plugin jquery tooltip jtip Live Demo tooltip
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ