CSS ข้อความคำเตือน

สร้างโครงการช่วยเหลือด้วย CSS (Tooltip).

การแสดง: โครงการช่วยเหลือ

ตัวอย่าง

เมื่อผู้ใช้เคลื่อนที่เมาส์เหนือองค์ประกอบ โครงการช่วยเหลือทั่วไปถูกใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งใดๆ

ด้านบน Tooltip text
ขวา Tooltip text
ด้านล่าง Tooltip text
ซ้าย Tooltip text

โครงการช่วยเหลือพื้นฐาน

สร้างโครงการช่วยเหลือที่แสดงข้อความเมื่อเคลื่อนที่เมาส์เหนือองค์ประกอบ

ตัวอย่าง

<style>
/* ตัวแทนโครงการช่วยเหลือ */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* แสดงจุดตามเส้นด้านล่างข้อความที่สามารถเคลื่อนที่เมาส์ได้ */
}
/* Tooltip ข้อความ */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* ตำแหน่งข้อความหลังจากตัวอย่างด้านล่าง */
  position: absolute;
  z-index: 1;
}
/* ให้เห็นข้อความหลังจากเคลื่อนที่เมาส์เหนือโครงการช่วยเหลือ */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
  <span class="tooltiptext">Tooltip text</span>
</div>

ทดลองด้วยตัวเอง

คำอธิบายตัวอย่าง

HTML:

ใช้องค์ประกอบตัวแทน (เช่น <div>) และเพิ่ม "tooltip" คลาส

ข้อความโทล์ทิปตั้งอยู่ใน class="tooltiptext" ใช้สำหรับองค์ประกอบที่ฝังอยู่ (เช่น <span>)

CSS:

tooltip คลาส position:relativeใช้เพื่อจัดตัวข้อความโทล์ทิปposition:absolute）。ข้อเน้น: สำหรับวิธีการจัดตัวโทล์ทิป โปรดดูตัวอย่างด้านล่าง

tooltiptext คลาสที่เก็บข้อความโทล์ทิป โดยเริ่มต้นนั้นจะซ่อนและจะแสดงข้อความเมื่อมีการเลื่อนเมาส์เหนือ (hover) และเรายังเพิ่มสไตล์พื้นฐานบางอย่างเช่น ความกว้าง 120 พิกเซล สีแบบดำ สีข้อความเป็นสีขาว ตั้งตรงและ padding ที่ด้านบนและด้านล่าง 5px

CSS border-radius ตัวแปรใช้เพื่อเพิ่มมุมทรงโค้งของข้อความโทล์ทิป

เมื่อผู้ใช้เลื่อนเมาส์เหนือ <div> ที่มี class="tooltip":hover เลือกเลขศัพท์เพื่อแสดงข้อความโทล์ทิป

การจัดตัวโทล์ทิป

ในตัวอย่างนี้ โทล์ทิปตั้งที่ด้านขวาของข้อความที่สามารถเลื่อนเมาส์เหนือ (hover) คือ <div>left:105%）。เพิ่มเติม โปรดจำได้top:-5px ใช้เพื่อที่จะจัดตัวโทล์ทิปให้ตั้งกลางในองค์ประกอบอิเล็กทรอนิกส์ของตัวเรา สายเลข 5 ที่เราใช้นั้นเพราะมีเนื้อหาย่อยที่มี padding ที่ด้านบนและด้านล่างที่มีความสูง 5px ถ้าคุณเพิ่ม padding ของมัน โปรดเพิ่มด้วย top ค่าของความเป็นเจ้าของคุณ เพื่อที่จะให้โทล์ทิปอยู่ในตำแหน่งกลาง ถ้าคุณต้องการที่จะจัดตัวโทล์ทิปอยู่ที่ด้านซ้าย ก็จะมีผลเดียวกัน

โทล์ทิปที่ตั้งที่ด้านขวา

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

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

โทล์ทิปที่ตั้งที่ด้านซ้าย

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

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

หากคุณต้องการให้โทล์ทิปตั้งที่ด้านบนหรือด้านล่าง โปรดดูตัวอย่างด้านล่างนี้ โปรดจำได้ว่า เราใช้ margin-left ลบ 60 พิกเซล คือเพื่อที่จะจัดตัวโทล์ทิปให้ตั้งกลางกับข้อความที่สามารถเลื่อนเมาส์เหนือ (hover) ของคุณ ค่านี้คือครึ่งความกว้างของโทล์ทิป (120/2 = 60)

โทล์ทิปที่ตั้งที่ด้านบน

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* ใช้ครึ่งความกว้าง (120/2 = 60) เพื่อที่จะจัดตัวโทล์ทิปให้ตั้งกลาง */
}

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

โทล์ทิปที่ตั้งที่ด้านล่าง

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* ใช้ครึ่งความกว้าง (120/2 = 60) เพื่อที่จะจัดตัวโทล์ทิปให้ตั้งกลาง */
}

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

ขีดนำโทล์ทิป

เพื่อที่จะสร้างของที่มีขีดนำแสดงขึ้นในด้านที่กำหนดของโทล์ทิป โปรดเพิ่มเนื้อหา 'ว่าง' หลังโทล์ทิป และใช้คลาสโพรไฟล์ ::after และ content 属性。

ตัวอย่างนี้แสดงว่าเป็นไรว่าเพิ่มฝายล่างลงใน tooltip:

ฝายล่าง

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* ข้างล่างของtooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: ดำ โค้ดรหมัดความโปร่งใส โค้ดรหมัดความโปร่งใส โค้ดรหมัดความโปร่งใส;
}

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

คำอธิบายตัวอย่าง

จัดลำดับฝายใน tooltip:top: 100% จัดลำดับฝายให้ตั้งตรงกลางของ tooltip。left: 50% จะทำให้ฝายตั้งตรงกลาง。

คำเตือน：border-width 属性กำหนดขนาดของฝาย。ถ้าคุณเปลี่ยนการตั้งค่านี้เรียบเรียงกันด้วย: margin-left เปลี่ยนค่าเป็นค่าเดียวกันนี้。นี่จะทำให้ฝายตั้งตรงกลาง。

border-color ใช้สำหรับการปรับเปลี่ยนเนื้อหาเป็นฝาย。

ตัวอย่างนี้แสดงว่าเป็นไรว่าเพิ่มฝายบนลงใน tooltip。โปรดเล็งเห็นว่าเราได้ตั้งค่าสีของเข็มไขว้ด้านล่าง:

ฝายบน

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* ข้างบนของtooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: โค้ดรหมัดความโปร่งใส โค้ดรหมัดความโปร่งใส ดำ โค้ดรหมัดความโปร่งใส;
}

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

ตัวอย่างนี้แสดงว่าเป็นไรว่าเพิ่มฝายซ้ายลงใน tooltip:

ฝายซ้าย

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* ข้างซ้ายของtooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: โค้ดรหมัดความโปร่งใส ดำ โค้ดรหมัดความโปร่งใส โค้ดรหมัดความโปร่งใส;
}

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

ตัวอย่างนี้แสดงว่าเป็นไรว่าเพิ่มฝายขวาลงใน tooltip:

ฝายขวา

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* ข้างขวาของtooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: โค้ดรหมัดความโปร่งใส โค้ดรหมัดความโปร่งใส โค้ดรหมัดความโปร่งใส โค้ดรหมัดดำ;
}

ผลลัพธ์:

กรุณาเคลื่อนเมาส์ไปที่ข้อความนี้ Tooltip text

ทดลองด้วยตัวเอง

Tooltip ที่เร่งเข้าใจ

ถ้าต้องการให้ตัวอักษรคำเตือนปรากฏและสูญตัวโดยการทำให้เร่งเข้าใจ สามารถใช้ CSS transition คุณสมบัติพร้อมกับ opacity ใช้คุณสมบัติพร้อมกัน และเปลี่ยนจากไม่เห็นได้เต็มที่เป็น 100% ในช่วงเวลาที่กำหนด (ตัวอย่าง 1 วินาที):

ตัวอย่าง

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  opacity: 1;
}

ทดลองด้วยตัวเอง