การทำ ToolTip กับ Dreamweaver CS4 [Article ID : 95]

Tooltip คือ คือข้อความหรือกลุ่มของข้อมูลสั้น ๆ ที่ใช้อธิบายคำหรือจุดที่ต้องการอธิบายเพิ่มเติมบนหน้าเว็บ เช่น บนหน้าเว็บของคุณอาจจะมีข้อความเป็นศัพท์ทางเทคนิคอยู่ ถ้าคนทั่วไปอ่านแล้วอาจจะไม่เข้าใจในคำนั้น แต่เมื่อผู้อ่านเว็บนำเมาท์ไปชี้ที่คำนั้น มีข้อความ/รูปภาพปรากฏเพื่ออธิบายขยายความคำนั้นขึ้นมา เป็นต้น

รูปแสดงตัวอย่างการทำงานของ ToolTip

ให้ทำการสร้างไฟล์เว็บเพจใหม่ขึ้นมา หรือเปิดไฟล์ที่เราต้องการสร้าง Tooltip ขึ้นมากับโปรแกรม Dreamweaver จากนั้น ปฏิบัติตามขั้นตอน ดังนี้

1. ขั้นตอนแรกให้ทำการเลือกบริเวณข้อความ หรือตำแหน่งที่ต้องการใช้ทูลทิปนี้ ดังรูป 2. จากนั้นเลือกที่ Insert -> Spry แล้วเลือกที่ไอคอน Spry Tooltip ดังรูป 3. โปรแกรมจะทำการ Insert กรอบข้อความสำหรับให้ทำการพิมพ์ข้อมูลที่จะแสดงเป็น Tooltip ที่เว็บเพจ ดังรูป 4. ให้ทำการพิมพ์ข้อความที่ต้องการลงไปตามต้องการ หรือจะทำการแทรกรูปภาพลงไปด้วยก็ได้ ตัวอย่างดังรูป 5. จากนั้นทำการใช้เมาท์เลือกที่กรอบ Spry Tooltip:...... (กรอบสีฟ้า ๆ ล้อมรอบข้อความ) เพื่อให้ Properties กลายเป็น Properties ของ Spry Tooltip แล้วให้ทำการกำหนดค่าที่ Properties ดังรูป ที่ Properties จากรูปข้างต้น มีการกำหนดค่า ดังนี้
เลือก : Follow mouse *เพื่อให้ทูลทิปปรากฎและเคลื่อนที่ไปกับเมาท์เมื่อผู้ใช้ชี้ไปที่ข้อความ
Effect : fade *เพื่อให้ทูลทิปค่อย ๆ ปรากฎเมื่อเมาท์มาชี้ หรือเมื่อนำเมาท์ออก ข้อความทูลทิปจะค่อย ๆ จางหายไป

6. จากนั้นทำการ Save ไฟล์เว็บเพจ 7. ทำการกดปุ่ม F12 ที่คีย์บอร์ดเพื่อทำการ Preview แสดงผลกับ Web Browser *เมื่อนำเมาท์ไปชี้ที่ข้อความที่มีการใช้ทูลทิป จะปรากฏเป็นกรอบข้อความขึ้นมา

การตบแต่ง Tooltip

หากต้องการตบแต่งข้อความ หรือกรอบของ Tooltip สามารถกำหนดค่าได้จาก CSS Panel โดยให้ทำการกำหนดค่าที่ Class Selector ที่ชื่อว่า .tooltipContent ดังรูป