การสร้าง Tooltip ด้วย CSS

ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการสร้าง Tooltip ง่ายๆ ด้วย CSS Tooltip เป็นข้อความอธิบายเพิ่มเติมที่จะปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปวางบนองค์ประกอบ (Element) ที่เรากำหนดไว้ Tooltip ช่วยให้เราสามารถให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบนั้นๆ ได้โดยไม่รบกวนการแสดงผลหลักของหน้าเว็บ

เราจะใช้เทคนิค CSS ที่เรียบง่าย โดยอาศัยคุณสมบัติ position, pseudo-elements (::before หรือ ::after) และการจัดการ visibility เพื่อสร้าง Tooltip ที่ใช้งานได้จริง

พื้นฐานที่ควรรู้ก่อนเริ่ม

ก่อนที่เราจะเริ่มสร้าง Tooltip กัน เรามาทบทวนความรู้พื้นฐานที่จำเป็นกันก่อน:

Positioning (position): คุณสมบัติ position ใน CSS กำหนดวิธีการวางตำแหน่งขององค์ประกอบในหน้าเว็บ เราจะใช้ relative และ absolute ในการสร้าง Tooltip
Pseudo-elements (::before และ ::after): Pseudo-elements คือสิ่งที่ช่วยให้เราสามารถแทรกเนื้อหา หรือตกแต่งองค์ประกอบ HTML โดยไม่ต้องแก้ไข HTML โดยตรง ::before จะแทรกเนื้อหาก่อนเนื้อหาหลักขององค์ประกอบ และ ::after จะแทรกเนื้อหาหลังเนื้อหาหลักขององค์ประกอบ
Visibility (visibility): คุณสมบัติ visibility ใช้เพื่อควบคุมว่าจะให้องค์ประกอบนั้นแสดงผลหรือไม่ โดยมีค่า visible (แสดงผล) และ hidden (ซ่อน)

ขั้นตอนการสร้าง Tooltip

เราจะสร้าง Tooltip โดยมีขั้นตอนดังนี้:

สร้างองค์ประกอบ HTML ที่เราต้องการให้มี Tooltip
กำหนด position: relative ให้กับองค์ประกอบนั้น
สร้าง Tooltip โดยใช้ ::after pseudo-element
กำหนด position: absolute ให้กับ Tooltip
จัดรูปแบบ Tooltip ให้สวยงาม
ซ่อน Tooltip ไว้ก่อน (visibility: hidden)
แสดง Tooltip เมื่อมีการ Hover บนองค์ประกอบ (โดยใช้ :hover pseudo-class)

ตัวอย่างโค้ด

มาดูตัวอย่างโค้ด HTML และ CSS ที่ใช้สร้าง Tooltip กัน:

<div class="tooltip">
  Hover here
  <span class="tooltiptext">Tooltip text</span>
</div>

และ CSS:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

คำอธิบายโค้ด:

.tooltip:
- position: relative;: กำหนดให้องค์ประกอบ .tooltip เป็น relative positioning ซึ่งเป็นจุดอ้างอิงสำหรับการวางตำแหน่งของ Tooltip (.tooltiptext) แบบ absolute
- display: inline-block;: ทำให้องค์ประกอบแสดงผลเป็น inline-block ซึ่งจะทำให้องค์ประกอบมีความกว้างตามเนื้อหา แต่ยังคงสามารถกำหนด margin และ padding ได้
- border-bottom: 1px dotted black;: (Optional) เพิ่มเส้นประใต้ข้อความที่สามารถ Hover ได้ เพื่อให้ผู้ใช้รู้ว่ามี Tooltip
.tooltip .tooltiptext:
- visibility: hidden;: ซ่อน Tooltip ไว้ก่อน
- width: 120px;: กำหนดความกว้างของ Tooltip
- background-color: black;: กำหนดสีพื้นหลังของ Tooltip
- color: #fff;: กำหนดสีตัวอักษรของ Tooltip
- text-align: center;: จัดข้อความใน Tooltip ให้อยู่ตรงกลาง
- border-radius: 6px;: ทำให้ขอบของ Tooltip โค้งมน
- padding: 5px 0;: เพิ่ม padding ด้านบนและด้านล่างของ Tooltip
- position: absolute;: กำหนดให้ Tooltip เป็น absolute positioning ซึ่งจะถูกวางตำแหน่งโดยอ้างอิงจากองค์ประกอบ .tooltip ที่เป็น relative
- z-index: 1;: กำหนดให้ Tooltip อยู่เหนือองค์ประกอบอื่นๆ ในกรณีที่มีการซ้อนทับกัน
- bottom: 125%;: วาง Tooltip ไว้เหนือองค์ประกอบ .tooltip (125% ของความสูงของ .tooltip)
- left: 50%;: กำหนดให้ขอบด้านซ้ายของ Tooltip อยู่กึ่งกลางขององค์ประกอบ .tooltip
- margin-left: -60px;: ชดเชยตำแหน่งเพื่อให้ Tooltip อยู่ตรงกลางจริงๆ (ครึ่งหนึ่งของความกว้างของ Tooltip)
.tooltip:hover .tooltiptext:
- visibility: visible;: เมื่อมีการ Hover บนองค์ประกอบ .tooltip จะแสดง Tooltip (.tooltiptext)

การปรับแต่ง Tooltip

เราสามารถปรับแต่ง Tooltip ให้สวยงามและเหมาะสมกับการใช้งานของเราได้มากขึ้น เช่น:

เปลี่ยนสีพื้นหลังและสีตัวอักษร: ปรับแต่ง background-color และ color ใน .tooltip .tooltiptext
เปลี่ยนตำแหน่งของ Tooltip: ปรับแต่ง top, bottom, left, และ right ใน .tooltip .tooltiptext
เพิ่มลูกศรชี้: สามารถเพิ่มลูกศรชี้ที่ Tooltip โดยใช้ ::before pseudo-element
ใช้ Animation: เพิ่ม Animation เพื่อให้ Tooltip ปรากฏขึ้นอย่างนุ่มนวล (เช่น Fade In)

ตัวอย่างการเพิ่มลูกศรชี้

เราสามารถเพิ่มลูกศรชี้ที่ Tooltip ได้โดยใช้ ::before pseudo-element ตัวอย่างเช่น:

.tooltip .tooltiptext::before {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

คำอธิบายโค้ด:

content: " ";: กำหนดเนื้อหาของ pseudo-element เป็นช่องว่าง
position: absolute;: กำหนดให้ลูกศรชี้เป็น absolute positioning
top: 100%;: วางลูกศรชี้ไว้ด้านล่างของ Tooltip
left: 50%;: กำหนดให้ลูกศรชี้อยู่กึ่งกลางแนวนอน
margin-left: -5px;: ชดเชยตำแหน่งเพื่อให้ลูกศรชี้อยู่ตรงกลางจริงๆ (ครึ่งหนึ่งของความกว้างของ border)
border-width: 5px;: กำหนดความกว้างของ border
border-style: solid;: กำหนดให้ border เป็นเส้นทึบ
border-color: black transparent transparent transparent;: กำหนดสีของ border โดยให้เฉพาะ border ด้านบนเป็นสีดำ และ border ด้านอื่นๆ เป็นโปร่งใส ทำให้เกิดเป็นรูปสามเหลี่ยม (ลูกศรชี้)

สรุป

ในบทเรียนนี้ เราได้เรียนรู้วิธีการสร้าง Tooltip ง่ายๆ ด้วย CSS โดยใช้ position, pseudo-elements และการจัดการ visibility Tooltip เป็นเครื่องมือที่มีประโยชน์ในการให้ข้อมูลเพิ่มเติมแก่ผู้ใช้โดยไม่รบกวนการแสดงผลหลักของหน้าเว็บ เราสามารถปรับแต่ง Tooltip ให้สวยงามและเหมาะสมกับการใช้งานของเราได้หลากหลายวิธี

ในบทเรียนถัดไป เราจะมาเรียนรู้วิธีการสร้าง Dropdown Menu ด้วย CSS กัน