【HTML】ทูลทิปพื้นฐาน | การแสดงเคล็ดลับเมื่อวางเมาส์โดยใช้แอตทริบิวต์ title

บทความนี้อธิบายวิธีการใช้แอตทริบิวต์ title ของ HTML สำหรับการแสดงทูลทิปแบบง่าย ๆ และวิธีการสร้างทูลทิปที่กำหนดเองโดยใช้ CSS และ JavaScript.

🔹 รหัสพื้นฐาน

<p>วางเมาส์บน<span title="ข้อมูลเพิ่มเติม">ส่วนนี้</span>เพื่อดูทูลทิป.</p>

💻 รหัสทั้งหมดที่ทำงานได้ (คัดลอกและวางเพื่อทดสอบ)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ตัวอย่างทูลทิป</title>
  <style>
    body {
      font-family: 'Segoe UI', Meiryo, sans-serif;
      padding: 20px;
      text-align: center;
      line-height: 1.6;
    }
    .tooltip-demo {
      color: #1e88e5;
      font-weight: bold;
      cursor: help;
      border-bottom: 1px dashed #1e88e5;
      padding-bottom: 1px;
    }
    .tooltip-demo:hover {
      color: #0d47a1;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>ตัวอย่างทูลทิป</h2>
    <p>วางเมาส์บน<span class="tooltip-demo" title="ทูลทิปกำลังแสดงอยู่! ข้อความเพิ่มเติมแสดงที่นี่."> ข้อความสีน้ำเงิน</span>เพื่อดูทูลทิป.</p>
    <p>ตัวอย่างนี้แสดงถึงการทำงานของทูลทิปโดยใช้แอตทริบิวต์ title ของ HTML.</p>
  </div>
</body>
</html>

🧩 ลักษณะพื้นฐานของทูลทิป

ทูลทิปที่ใช้แอตทริบิวต์ title เป็นฟีเจอร์มาตรฐานของเบราว์เซอร์ที่สามารถใช้งานได้โดยไม่ต้องใช้ JavaScript โดยจะแสดงหลังจากที่วางเมาส์บนองค์ประกอบเป็นเวลา 1 วินาที และจะหายไปเมื่อเมาส์ถูกย้ายออกหรือคลิก.

ข้อดีคือรองรับเบราว์เซอร์หลักทุกตัวและมีฟีเจอร์ที่ช่วยให้อ่านได้ด้วยเครื่องมืออ่านหน้าจอ (screen reader) ซึ่งช่วยด้านการเข้าถึงข้อมูล (accessibility) อย่างไรก็ตามไม่สามารถปรับแต่งการออกแบบได้.

🎯 การสร้างทูลทิปที่กำหนดเอง

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<div class="tooltip">วางเมาส์บนฉัน
  <span class="tooltiptext">ทูลทิปที่กำหนดเอง</span>
</div>

คุณสามารถสร้างทูลทิปที่กำหนดเองโดยใช้แค่ CSS และ HTML วิธีนี้ช่วยให้มีความยืดหยุ่นในการออกแบบ และสามารถเพิ่มเอฟเฟกต์อนิเมชันได้ อย่างไรก็ตาม, การปรับตำแหน่งแบบพลศาสตร์จะมีข้อจำกัดหากไม่มีการใช้ JavaScript.

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

คำแนะนำในฟอร์ม: <label>รหัสผ่าน: <input type="password">?</label>

คำอธิบายศัพท์: HTML เป็นภาษาที่ใช้ในการสร้างหน้าเว็บ.

ตัวอย่างเหล่านี้แสดงวิธีการใช้งานทูลทิปเพื่อเพิ่มความสะดวกในการใช้งานของผู้ใช้.

⚠️ หมายเหตุสำคัญ: ทูลทิป vs ลิงก์

ฟังก์ชันทูลทิปแบบบริสุทธิ์

วิธีที่กล่าวถึงในบทความนี้เป็น ฟังก์ชันทูลทิปที่บริสุทธิ์ไม่มีการทำงานของลิงก์ โดย  จะ:

ไม่เปลี่ยนไปที่หน้าเมื่อคลิก
ใช้แสดงข้อมูลเมื่อวางเมาส์เท่านั้น
การตกแต่งแบบกราฟิก (เช่น การเปลี่ยนสี) สามารถทำได้ด้วย CSS

<!-- ไม่มีฟังก์ชันลิงก์ -->
<span class="tooltip" title="คำอธิบาย">วางเมาส์บน</span>

<!-- ลิงก์ที่มีทูลทิป -->
<a href="page.html" title="คำอธิบาย">ลิงก์ที่สามารถคลิกได้</a>

การรวมทูลทิปกับลิงก์

สำหรับการสร้างลิงก์ที่มีทูลทิปให้เพิ่มแอตทริบิวต์ title เข้าไปในแท็ก <a>:

<a href="#" class="tooltip-link" title="คุณจะถูกเปลี่ยนไปยังหน้ารายละเอียด">
  ลิงก์ที่สามารถคลิกได้
</a>

<style>
.tooltip-link {
  color: #0066cc;
  text-decoration: underline;
}
</style>

คัดลอกแล้ว!