ในบทเรียน 초단기 นี้ คุณจะเรียนรู้วิธีแสดงข้อความอธิบายสั้นๆ (Like a Tooltip) เมื่อผู้ใช้ Hover บน Element เช่น รูปภาพหรือลิงก์
วิธีเพิ่ม Tooltip ใช้ไม่กี่วินาที แค่ใช้ HTML Title Attribute: title
แสดงข้อความเมื่อ Hover (Mouse Over Element)
ตัวอย่างพื้นฐานรูปภาพ Rubik's Cube เลื่อนเมาส์ไปที่รูป ภายในไม่กี่วินาที ข้อมูลเพิ่มเติมจะโผล่ขึ้น:
HTML Markup สำหรับรูปภาพข้างต้น:
<img src="url-to-image-file" title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik." alt="A Rubik's Cube" />สมมติต้องการ Tooltip เมื่อเลื่อนเมาส์ไปที่ Link/Anchor Element
เลื่อนเมาส์ไปที่ลิงก์นี้เพื่อดู Tooltip
Latest articles
HTML Markup:
<a href="https://techstacker.com" title="Link to TechStacker's front page" >Latest articles</a >แค่นี้ก็จบ คุณสามารถเพิ่มแอตทริบิวต์ title ให้ Element HTML ใดๆ ได้
ทำไมการแสดงข้อความเมื่อเลื่อนเมาส์จึงมีประโยชน์?
สมมติมี Element ที่อาจทำให้บางคนสับสนจากความเรียบง่าย ตัวอย่าง Icon ผู้ส่วนใหญ่จดจำ Icon ได้ไม่เกินนิ้วมือ แต่มี Icons หลายพันตัวแสดงอยู่ในโลกตะวันตกเพียงอย่างเดียว
เพียงเพิ่ม Title Attribute บน Icon (เช่น ใน Image Element) คนก็ได้คำอธิบายชัดเจนของ Function ของ Icon ไว้ที่ UI
คุณอาจคิดว่า มีคนกี่คนรู้ว่า Hover + รอ 1-2 วินาที จะแสดงข้อมูลเพิ่ม?
คำถามดี คำตอบคือ ขึ้นกับ Target Audience คนรู้จักเทคโนโลยีส่วนใหญ่รู้โดย intuition ว่า Hover + รอ จะเผยข้อมูลเพิ่ม
แต่อย่างที่ Audience ส่วนใหญ่ไม่รู้จักเทคโนโลยี หรือคนที่ไม่ได้เล่นเว็บมาก?
ก็ใช้คำแนะนำสากลของ Luke Wroblewski:
Obvious always wins.
ถ้า Icon ไม่ชัด หรือไม่ชัดสำหรับคนส่วนใหญ่ ให้ทำ Icon ดีกว่า หรือคู่กับคำอธิบายสั้น
เพิ่ม Title Attribute และ แน่นอน ALT Attribute (สำหรับ Screen Readers, ผู้บกพร่องทางสายตา) มีแต่ข้อดี ไม่ต้องเพิ่มทุกอย่าง แต่หากไม่แน่ใจ ก็ควรทำ
โบนัส: ALT Attributes มีผลต่อ SEO โดยตรงหรือโดยอ้อม เพราะอยู่ในหมวด Accessibility ที่ Google ยอมรับว่าส่งผลต่อการประเมินคุณภาพเว็บ ซึ่งมีผลต่อ SEO Ranking
แอตทริบิวต์ Title เคย ส่งผลต่อ SEO แต่จากล่าสุด ไม่ชัดเจนว่ายังมีผลอยู่ แต่ไม่มีข้อเสียชัดเจนจากการใช้ Title Attribute มีแต่ข้อดี
วิธี Tooltip แบบอื่น
อาจต้องการ Tooltip แบบ Custom มากกว่า Built-in HTML Title Attribute ใช้ JavaScript และ CSS จัด Time และ Style Tooltip สำหรับกรณีต่างๆ จะสอนในอนาคต (อยู่ใน To-write List!)
