เคล็ดลับสร้างด้วย CSS
ตัวอย่างเคล็ดลับ: สาธิต
คำแนะนำเครื่องมือมักจะถูกใช้เพื่อระบุข้อมูลเพิ่มเติมเกี่ยวกับบางสิ่งบางอย่างเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ:
เคล็ดลับพื้นฐาน
สร้างคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปที่องค์ประกอบ A:
ตัวอย่าง
<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 การใช้งานระดับ position:relative ซึ่งเป็นสิ่งจำเป็นในการวางตำแหน่งข้อความคำแนะนำเครื่องมือ ( position:absolute .) หมายเหตุ: โปรดดูตัวอย่างด้านล่างเกี่ยวกับวิธีการวางตำแหน่งของคำแนะนำเครื่องมือ
tooltiptext ระดับถือข้อความคำแนะนำเครื่องมือที่เกิดขึ้นจริง มันถูกซ่อนไว้โดยค่าเริ่มต้นและจะปรากฏบนโฮเวอร์ (ดูด้านล่าง) เรายังได้เพิ่มรูปแบบพื้นฐานบางอย่างกับมันกว้าง 120px สีพื้นหลังสีดำ, สีข้อความสีขาวข้อความศูนย์กลางและด้านบน 5px padding และด้านล่าง
CSS3 border-radius คุณสมบัติถูกนำมาใช้เพื่อเพิ่มมุมโค้งมนกับข้อความคำแนะนำเครื่องมือ
:hover เลือกจะใช้ในการแสดงข้อความคำแนะนำเครื่องมือเมื่อผู้ใช้เลื่อนเมาส์มากกว่า <div> กับ class="tooltip"
Positioning คำแนะนำเครื่องมือ
ในตัวอย่างนี้, คำแนะนำที่วางอยู่ด้านขวา (left:105%) ของ "hoverable" ข้อความ (<div>) นอกจากนี้ทราบว่า top:-5px จะใช้ในการวางไว้ในช่วงกลางขององค์ประกอบภาชนะของตน เราใช้จำนวน 5 เนื่องจากข้อความคำแนะนำเครื่องมือที่มีช่องว่างด้านบนและด้านล่างของ 5px ถ้าคุณเพิ่มช่องว่างภายในยังเพิ่มมูลค่าของที่ top ของสถานที่เพื่อให้มั่นใจว่ามันอยู่ตรงกลาง (ถ้านี่คือสิ่งที่คุณต้องการ) เช่นเดียวกับถ้าคุณต้องการคำแนะนำเครื่องมือวางไปทางซ้าย
เคล็ดลับเครื่องมือที่เหมาะสม
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
ผล:
ซ้ายเคล็ดลับ
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
ผล:
หากคุณต้องการคำแนะนำเครื่องมือที่จะปรากฏอยู่ด้านบนหรือด้านล่างให้ดูตัวอย่างด้านล่าง โปรดทราบว่าเราจะใช้ margin-left ทรัพย์สินที่มีค่าของลบ 60 พิกเซล นี่คือเคล็ดลับเครื่องมือไปยังศูนย์ดังกล่าวข้างต้น / ด้านล่างข้อความ hoverable มันถูกตั้งค่าเป็นครึ่งหนึ่งของความกว้างของคำแนะนำเครื่องมือฯ (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;
}
ผล:
จางหายไปในคำแนะนำเครื่องมือ (Animation)
ถ้าคุณต้องการที่จะจางหายไปในข้อความคำแนะนำเครื่องมือเมื่อมันเป็นเรื่องเกี่ยวกับที่จะมองเห็นคุณสามารถใช้ CSS3 นี้ transition สถานที่ให้บริการร่วมกับ opacity ทรัพย์สินและไปจากการเป็นสมบูรณ์ไม่เห็นมองเห็นได้ 100% ในจำนวนวินาทีที่ระบุ (1 วินาที ในตัวอย่างของเรา):
ตัวอย่าง
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} ลองตัวเอง» หมายเหตุ: คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการเปลี่ยนและภาพเคลื่อนไหวในภายหลังกวดวิชาของเรา