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:คลาสtooltip
use 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%;
}
ผลลัพธ์:
เคล็ดลับเครื่องมือซ้าย
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
ผลลัพธ์:
หากคุณต้องการให้คำแนะนำเครื่องมือปรากฏที่ด้านบนหรือด้านล่าง ดูตัวอย่างด้านล่าง โปรดทราบว่าเราใช้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 */
}
ผลลัพธ์:
เคล็ดลับเครื่องมือด้านล่าง
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
ผลลัพธ์:
ลูกศรคำแนะนำเครื่องมือ
ในการสร้างลูกศรที่ควรปรากฏขึ้นจากด้านใดด้านหนึ่งของคำแนะนำเครื่องมือ ให้เพิ่มเนื้อหา "ว่าง" หลังคำแนะนำเครื่องมือ โดยมีคลาสองค์ประกอบเทียม::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;
}
ผลลัพธ์:
ตัวอย่างที่อธิบาย
วางตำแหน่งลูกศรภายในคำแนะนำเครื่องมือ: 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;
}
ผลลัพธ์:
ตัวอย่างนี้สาธิตวิธีเพิ่มลูกศรทางด้านซ้ายของคำแนะนำเครื่องมือ:
ลูกศรซ้าย
.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;
}
ผลลัพธ์:
ตัวอย่างนี้สาธิตวิธีเพิ่มลูกศรทางด้านขวาของคำแนะนำเครื่องมือ:
ลูกศรขวา
.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;
}
ผลลัพธ์:
Fade In Tooltips (แอนิเมชั่น)
หากคุณต้องการจางลงในข้อความคำแนะนำเครื่องมือเมื่อกำลังจะมองเห็น คุณสามารถใช้transition
คุณสมบัติ CSS ร่วมกับopacity
คุณสมบัติ และเปลี่ยนจากการมองไม่เห็นทั้งหมดเป็นมองเห็นได้ 100% ในจำนวนวินาทีที่ระบุ (1 วินาทีใน ตัวอย่าง):
ตัวอย่าง
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}