การทำ ToolTip กับ Dreamweaver CS4

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

>> XHTML

................................................................................................................................................................................

วิธีการทำ ToolTip

1. ขั้นตอนแรกให้ทำการเลือกบริเวณข้อความ หรือตำแหน่งที่ต้องการใช้ทูลทิปนี้ ดังรูป

2. จากนั้นไปที่ Insert Bar -> Spry  แล้วเลือกที่ไอคอน Spry Tooltip ดังรูป

3. โปรแกรมจะทำการแสดงกรอบข้อความสำหรับให้เราทำการพิมพ์ข้อความที่จะแสดงเป็น Tooltip ให้เรา ดังรูป

4. ให้เราทำการพิมพ์ข้อความที่ต้องการลงไปตามต้องการ หรือคุณจะทำการแทรกรูปภาพลงไปด้วยก็ได้

5. จากนั้นทำการเลือกที่กรอบ Spry Tooltip: (กรอบสีฟ้า ๆ ล้อมรอบข้อความ) แล้วให้เราทำการกำหนดค่าที่ Properties ดังรูป

Trigger	เลือกชื่อ Trigger (ถ้าจะกำหนดค่าให้กับ Tooltip ปัจจุบันไม่ต้องเลือก)
Follow mouse	ข้อความ Tooltip จะเคลื่อนไหวไปกับ Mouse
Hide on Mouse out	ทำการซ่อน Tooltip เมื่อนำเมาท์ออก
Horizontal offset	ตำแหน่งแนวนอน (แกน x) ที่ต้องการให้ Tooltip ปรากฏ
Vertical offset	ตำแหน่งแนวตั้ง (แกน y) ที่ต้องการให้ Tooltip ปรากฏ
Effect	รูปแบบเทคนิคการแสดงผล None ไม่มีการใช้เทคนิคการแสดงผล Blind แสดงผลแบบค่อย ๆ ยืดข้อความออกมา (แบบตัวอย่างด้านบน) Fade แสดงผลแบบค่อย ๆ ปรากฏขึ้น
Show delay	ค่าเวลาที่กำหนดให้ Tooltip ค่อย ๆ ปรากฏขึ้น
Hide delay	ค่าแวลาที่กำหนดให้ Tooltip ค่อย ๆ หายไป

6. จากนั้นทำการ Save ไฟล์ ถ้าหากเป็นการบันทึกครั้งแรกที่มีการใช้งาน Tooltip โปรแกรมจะแสดงหน้าต่างดังรูป ให้เราทำการกดปุ่ม OK เพื่อให้เราทำการบันทึกไฟล์ที่เกี่ยวข้อง ซึ่งไฟล์ทั้งหมดนี้ เมื่อเราจะนำไปใช้งานบน Hosting เราต้องทำการอัพโหลดขึ้นไปด้วย

7. กด F12 ทำการ Preview แสดงผลกับ Browser
8. หากต้องการตบแต่งข้อความหรือกรอบของ Tooltip เราสามารถกำหนดได้จาก CSS ที่ชื่อว่า .tooltipContent 

................................................................................................................................................................................