CSS Tooltip: สร้าง Tooltip (คำแนะนำ) ด้วย HTML และ CSS

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

สร้างได้ด้วย Tooltip — ไม่มี HTML element เริ่มต้นสำหรับ tooltip จึงต้องรวม HTML และ CSS เอง

บทเรียนนี้อธิบายการสร้าง tooltip ใน CSS พร้อมตัวอย่าง จนจบคุณจะสร้าง tooltip ได้อย่างมืออาชีพ

CSS Tooltips คืออะไร?

Tooltips ใช้เพิ่มข้อมูลเกี่ยวกับองค์ประกอบบนหน้าเว็บ มักพบในเว็บไซต์ที่ต้องการอธิบายหรือเพิ่มนิยามคำศัพท์

โครงสร้าง HTML สำหรับ Tooltip

ตัวอย่าง: เว็บสูตรอาหาร เมื่อ hover คำว่า "prepare the baking tray" จะแสดง tooltip วิธีเตรียมถาด

<html>
  <div style="text-align:center;">
    <p>Instructions for baking:</p>
    <div class="tooltip">
      Prepare the baking tray.
      <span class="contents">Line tray with greaseproof paper.</span>
    </div>
  </div>
</html>

<div class="tooltip"> แสดงข้อความหลัก <span class="contents"> เก็บข้อความ tooltip ที่จะแสดงเมื่อ hover

CSS สำหรับ Tooltip

<style>
  .tooltip {
    display: inline-block;
    position: relative;
    margin: 50px;
  }
  
  .tooltip .contents {
    visibility: hidden;
    width: 120px;
    background-color: lightblue;
    color: white;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .contents {
    visibility: visible;
  }
</style>

การทำงานของ CSS

.tooltip Style

• display: inline-block — กล่อง inline-level เริ่มบรรทัดใหม่
• position: relative — tooltip อยู่ตำแหน่งเดิมแม้ scroll หน้า
• margin: 50px — พื้นที่ว่างรอบ tooltip

.tooltip .contents Style (tooltip จริง)

• visibility: hidden — ซ่อน tooltip จนกว่าจะ hover
• width: 120px, background-color: lightblue, color: white
• text-align: center, padding: 10px 0, border-radius: 5px — มุมโค้ง
• position: absolute — ตำแหน่งสัมพันธ์กับ parent (.tooltip)
• z-index: 1 — อยู่เหนือองค์ประกอบอื่น

.tooltip:hover .contents Style

เมื่อ hover .tooltip ให้ visibility: visible แสดง tooltip

การจัดตำแหน่ง Tooltip (Positioning)

tooltip ค่าเริ่มต้นอยู่ขวา แต่สามารถปรับได้:

Right Position (ขวา) — ค่าเริ่มต้น

.tooltip .contents { top: -5px; left: 105%; }

top: -5px จัดกึ่งกลางแนวตั้ง left: 105% วางขวา container

Left Position (ซ้าย)

.tooltip .contents { top: -5px; right: 105%; }

right: 105% วางซ้าย container

Top Position (บน)

.tooltip .contents { bottom: 100%; left: 50%; margin-left: -60px; }

bottom: 100% ขึ้นเหนือ label left: 50% + margin-left: -60px (ครึ่งหนึ่งของ width 120px) จัดกึ่งกลาง

Bottom Position (ล่าง)

.tooltip .contents { top: 100%; left: 50%; margin-left: -60px; }

top: 100% วางล่าง label

Fade-in Tooltips (Tooltip แบบลางเลื่อนเข้ามา)

ใช้ opacity และ transition สร้างเอฟเฟกต์ fade-in

.tooltip .contents {
  opacity: 0;
  transition: opacity 2s;
}

.tooltip:hover .contents {
  opacity: 1;
}

เริ่ม opacity: 0 (มองไม่เห็น) transition: opacity 2s ทำให้เปลี่ยนสถานะใน 2 วินาที เมื่อ hover opacity: 1 (มองเห็นชัด) สร้างการเปลี่ยนแปลงนุ่มนวล

สรุป

Tooltips แสดงข้อมูลเพิ่มเติมบนเว็บ ด้วย HTML และ CSS สร้าง tooltip สวยงามได้ บทเรียนนี้ครอบคลุม: การสร้าง tooltip, จัดตำแหน่ง (ซ้าย ขวา บน ล่าง), และ fade-in effect ตอนนี้คุณพร้อมออกแบบ CSS tooltips อย่างมืออาชีพ!