กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS Tooltip


สร้างคำแนะนำเครื่องมือด้วย CSS


การสาธิต: ตัวอย่างคำแนะนำเครื่องมือ

คำแนะนำเครื่องมือมักใช้เพื่อระบุข้อมูลเพิ่มเติมเกี่ยวกับบางสิ่งเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ:

สูงสุด ข้อความคำแนะนำเครื่องมือ
ถูกต้อง ข้อความคำแนะนำเครื่องมือ
ล่าง ข้อความคำแนะนำเครื่องมือ
ซ้าย ข้อความคำแนะนำเครื่องมือ


เคล็ดลับเครื่องมือพื้นฐาน

สร้างคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปที่องค์ประกอบ:

ตัวอย่าง

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

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

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

ตัวอย่างที่อธิบาย

HTML:ใช้องค์ประกอบคอนเทนเนอร์ (เช่น <div>) และเพิ่ม "tooltip"คลาสลงไป เมื่อผู้ใช้วางเมาส์เหนือ <div> นี้ จะแสดงข้อความคำแนะนำเครื่องมือ

ข้อความคำแนะนำเครื่องมือวางอยู่ภายในองค์ประกอบแบบอินไลน์ (เช่น <span>) ด้วยclass="tooltiptext".

CSS:คลาสtooltipuse position:relativeซึ่งจำเป็นสำหรับการวางตำแหน่งข้อความคำแนะนำเครื่องมือ ( position:absolute) หมายเหตุ:ดูตัวอย่างด้านล่างเกี่ยวกับการวางตำแหน่งคำแนะนำเครื่องมือ

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

คุณสมบัติ CSS border-radiusใช้เพื่อเพิ่มมุมโค้งมนให้กับข้อความคำแนะนำเครื่องมือ

ตัว:hoverเลือกใช้เพื่อแสดงข้อความคำแนะนำเครื่องมือเมื่อผู้ใช้เลื่อนเมาส์ไปที่ <div> class="tooltip"ด้วย



เคล็ดลับเครื่องมือการวางตำแหน่ง

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

เคล็ดลับเครื่องมือขวา

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

ผลลัพธ์:

Hover over me Tooltip text

เคล็ดลับเครื่องมือซ้าย

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

ผลลัพธ์:

Hover over me Tooltip text

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

เคล็ดลับเครื่องมือยอดนิยม

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

ผลลัพธ์:

Hover over me Tooltip text

เคล็ดลับเครื่องมือด้านล่าง

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

ผลลัพธ์:

Hover over me Tooltip text

ลูกศรคำแนะนำเครื่องมือ

ในการสร้างลูกศรที่ควรปรากฏขึ้นจากด้านใดด้านหนึ่งของคำแนะนำเครื่องมือ ให้เพิ่มเนื้อหา "ว่าง" หลังคำแนะนำเครื่องมือ โดยมีคลาสองค์ประกอบเทียม::afterร่วมกับcontent คุณสมบัติ ลูกศรถูกสร้างขึ้นโดยใช้เส้นขอบ ซึ่งจะทำให้คำแนะนำเครื่องมือดูเหมือนกรอบคำพูด

ตัวอย่างนี้สาธิตวิธีเพิ่มลูกศรที่ด้านล่างของคำแนะนำเครื่องมือ:

ลูกศรล่าง

.tooltip .tooltiptext::after {
  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;
}

ผลลัพธ์:

Hover over me Tooltip text

ตัวอย่างที่อธิบาย

วางตำแหน่งลูกศรภายในคำแนะนำเครื่องมือ: top: 100%จะวางลูกศรที่ด้านล่างของคำแนะนำเครื่องมือ left: 50%จะตั้งศูนย์ลูกศร

หมายเหตุ:คุณสมบัติborder-widthระบุขนาดของลูกศร หากคุณเปลี่ยนสิ่งนี้ ให้เปลี่ยนmargin-leftค่าเป็นค่าเดิมด้วย สิ่งนี้จะทำให้ลูกศรอยู่ตรงกลาง

ใช้เพื่อแปลง เนื้อหาborder-colorเป็นลูกศร เราตั้งค่าขอบด้านบนเป็นสีดำและที่เหลือเป็นแบบโปร่งใส ถ้าทุกด้านเป็นสีดำ คุณจะลงเอยด้วยกล่องสี่เหลี่ยมสีดำ

ตัวอย่างนี้สาธิตวิธีการเพิ่มลูกศรที่ด้านบนของคำแนะนำเครื่องมือ สังเกตว่าเราตั้งค่าสีขอบด้านล่างในครั้งนี้:

ลูกศรบน

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

ผลลัพธ์:

Hover over me Tooltip text

ตัวอย่างนี้สาธิตวิธีเพิ่มลูกศรทางด้านซ้ายของคำแนะนำเครื่องมือ:

ลูกศรซ้าย

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

ผลลัพธ์:

Hover over me Tooltip text

ตัวอย่างนี้สาธิตวิธีเพิ่มลูกศรทางด้านขวาของคำแนะนำเครื่องมือ:

ลูกศรขวา

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

ผลลัพธ์:

Hover over me Tooltip text

Fade In Tooltips (แอนิเมชั่น)

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

ตัวอย่าง

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

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