เพิ่มข้อมูลเพิ่มเติมให้องค์ประกอบด้วยแอตทริบิวต์ title ใน HTML

แอตทริบิวต์ title ใช้ให้ข้อมูลเพิ่มเติม (tooltip) เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ เป็น global attribute ใช้ได้กับทุกแท็ก HTML

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <title>HTML title Attribute Demo</title>
</head>
<body>
  <h2>ตัวอย่าง title attribute</h2>
  
  <!-- ลิงก์พร้อม tooltip -->
  <a href="https://www.example.com" title="ไปยังเว็บไซต์ Example.com (เปิดในแท็บใหม่)" target="_blank">
    เยี่ยมชม Example.com
  </a>
  <br><br>
  
  <!-- รูปภาพพร้อม tooltip -->
  <img src="logo.png" alt="โลโก้บริษัท" title="โลโก้บริษัท ABC - คลิกเพื่อดูขนาดเต็ม">
  <br><br>
  
  <!-- ปุ่มพร้อมคำอธิบาย -->
  <button title="บันทึกข้อมูล (Ctrl+S)" onclick="saveData()">
    💾 บันทึก
  </button>
  <br><br>
  
  <!-- ตัวย่อพร้อมความหมายเต็ม -->
  <abbr title="HyperText Markup Language">HTML</abbr>
  <abbr title="Cascading Style Sheets">CSS</abbr>
  <abbr title="JavaScript Object Notation">JSON</abbr>
  
  <br><br>
  
  <!-- ใช้กับองค์ประกอบทั่วไป -->
  <div title="นี่คือ div container หลัก" style="border:1px dashed #ccc; padding:20px;">
    วางเมาส์ที่นี่เพื่อดู tooltip
  </div>
</body>
</html>

แนวทางปฏิบัติที่ดีที่สุด

• ไม่ควรใช้ title แทน label - สำหรับฟอร์ม ให้ใช้ <label> เสมอ
• ไม่ควรพึ่งพา title เพียงอย่างเดียว - ไม่ทำงานบน touch devices (มือถือ/แท็บเล็ต)
• ใช้ข้อความสั้นกระชับ - Tooltip แสดงเวลาจำกัด
• ข้อมูลสำคัญควรแสดงโดยตรง - ไม่ควรซ่อนไว้ใน tooltip เท่านั้น

ข้อจำกัดด้านการเข้าถึง (Accessibility)

ทางเลือกที่ดีกว่า

• Tooltips แบบ custom - สร้างด้วย CSS/JS แสดงได้ทั้ง hover และ focus
• aria-describedby - ผูกกับองค์ประกอบอธิบายแยกต่างหาก
• Help text ใต้ฟิลด์ - แสดงข้อความช่วยเหลือคงที่