สร้างคำแนะนำเครื่องมือด้วย CSS
คำแนะนำเครื่องมือมักจะใช้เพื่อระบุข้อมูลเพิ่มเติมเกี่ยวกับบางสิ่งบางอย่างเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปเหนือองค์ประกอบ:
สร้างคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบ:
<style>
/* Tooltip container */
.tooltip-local {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip-local .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-local:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip-local">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.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;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
HTML: ใช้องค์ประกอบคอนเทนเนอร์ (เช่น <div>) และเพิ่ม "tooltip" คลาสลงไป เมื่อผู้ใช้เลื่อนเมาส์ไปที่ <div> นี้ มันจะแสดง ข้อความคำแนะนำเครื่องมือ
ข้อความคำแนะนำเครื่องมือถูกวางไว้ภายในองค์ประกอบแบบอินไลน์ (เช่น <span>) ด้วย class="tooltiptext"
CSS: คลาส คำแนะนำเครื่องมือ ใช้ position:relative, ซึ่งจำเป็นสำหรับการวางตำแหน่งข้อความคำแนะนำเครื่องมือ (position:absolute) หมายเหตุ: ดูตัวอย่างด้านล่างเกี่ยวกับวิธีวางตำแหน่งคำแนะนำเครื่องมือ
คลาส tooltiptext เก็บข้อความคำแนะนำเครื่องมือจริง มันคือ ซ่อนไว้โดยค่าเริ่มต้น และจะปรากฏให้เห็นเมื่อโฮเวอร์ (ดูด้านล่าง) นอกจากนี้เรายังได้เพิ่ม สไตล์พื้นฐานบางอย่าง: ความกว้าง 120px, สีพื้นหลังสีดำ, สีข้อความสีขาว, ข้อความที่อยู่ตรงกลาง และช่องว่างด้านบนและด้านล่าง 5px
คุณสมบัติ CSS border-radius ใช้เพื่อเพิ่มมุมโค้งมนให้กับคำแนะนำเครื่องมือ ข้อความ.
ตัวเลือก :hover ใช้เพื่อแสดงข้อความคำแนะนำเครื่องมือเมื่อผู้ใช้ย้าย เลื่อนเมาส์ไปเหนือ <div> ด้วย class="tooltip"
ในตัวอย่างนี้ คำแนะนำเครื่องมือถูกวางไว้ทางด้านขวา (left:105%) ของ "hoverable" ข้อความ (<div>) โปรดทราบว่า top:-5px ใช้เพื่อวางไว้ตรงกลางขององค์ประกอบคอนเทนเนอร์ เราใช้ตัวเลข 5 เนื่องจากข้อความคำแนะนำเครื่องมือมีเครื่องหมายด้านบนและ ช่องว่างภายในด้านล่างของ 5px. หากคุณเพิ่มช่องว่างภายใน ให้เพิ่มค่าของคุณสมบัติ top เป็น ตรวจสอบให้แน่ใจว่าอยู่ตรงกลาง (หากนี่คือสิ่งที่คุณต้องการ) เหมือน ใช้ถ้าคุณต้องการวางคำแนะนำเครื่องมือไว้ทางซ้าย
.tooltip-local .tooltiptext {
top: -5px;
left:
105%;
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.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;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
top: -5px;
right:
105%;
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.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;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
หากคุณต้องการให้คำแนะนำเครื่องมือปรากฏด้านบนหรือด้านล่าง ให้ดูตัวอย่าง ด้านล่าง. โปรดทราบว่าเราใช้คุณสมบัติ margin-left ที่มีค่าลบ 60 พิกเซล นี่คือการวางคำแนะนำเครื่องมือไว้ตรงกลางด้านบน/ล่างข้อความที่สามารถโฮเวอร์ได้ มันถูกตั้งค่า เหลือครึ่งหนึ่งของความกว้างของคำแนะนำเครื่องมือ (120/2=60)
.tooltip-local .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.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: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.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;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
หากต้องการสร้างลูกศรที่ควรปรากฏจากด้านใดด้านหนึ่งของคำแนะนำเครื่องมือ ให้เพิ่ม "ว่าง" เนื้อหาหลังจากนั้น เคล็ดลับเครื่องมือ โดยมีคลาสองค์ประกอบหลอก ::after พร้อมด้วย เนื้อหา คุณสมบัติ. ลูกศรนั้นถูกสร้างขึ้นโดยใช้เส้นขอบ นี่จะทำให้คำแนะนำเครื่องมือ ดูเหมือนฟองคำพูด
ตัวอย่างนี้สาธิตวิธีการเพิ่มลูกศรที่ด้านล่างของคำแนะนำเครื่องมือ:
.tooltip-local .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;
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
วางตำแหน่งลูกศรภายในคำแนะนำเครื่องมือ: top: 100% จะวางลูกศรไว้ที่ ด้านล่างของคำแนะนำเครื่องมือ left: 50% จะทำให้ลูกศรอยู่ตรงกลาง
หมายเหตุ: คุณสมบัติ border-width ระบุขนาดของ ลูกศร หากคุณเปลี่ยนแปลง ให้เปลี่ยนค่า margin-left ให้เหมือนเดิมด้วย นี้ จะทำให้ลูกศรอยู่ตรงกลาง
border-color ใช้ในการแปลงเนื้อหาให้เป็นลูกศร เราตั้งค่า ขอบบนเป็นสีดำ และส่วนที่เหลือเป็นโปร่งใส ถ้าทุกด้านเป็นสีดำคุณ ก็จะได้กล่องสี่เหลี่ยมสีดำ
ตัวอย่างนี้สาธิตวิธีการเพิ่มลูกศรที่ด้านบนของคำแนะนำเครื่องมือ โปรดสังเกตว่าเราตั้งค่าสีเส้นขอบด้านล่างในครั้งนี้:
.tooltip-local .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;
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
ตัวอย่างนี้สาธิตวิธีการเพิ่มลูกศรทางด้านซ้ายของคำแนะนำเครื่องมือ:
.tooltip-local .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;
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
ตัวอย่างนี้สาธิตวิธีการเพิ่มลูกศรทางด้านขวาของคำแนะนำเครื่องมือ:
.tooltip-local .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;
}ผลลัพธ์ :
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip w/ Right Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
หากคุณต้องการให้ข้อความคำแนะนำเครื่องมือจางลงเมื่อข้อความนั้นกำลังจะปรากฏให้เห็น แสดงว่าคุณ สามารถใช้คุณสมบัติ transition ของ CSS ร่วมกับ ความทึบ และเปลี่ยนจากการมองไม่เห็นโดยสมบูรณ์เป็นมองเห็นได้ 100% ภายในเวลาไม่กี่วินาทีที่กำหนด (1 วินาทีในตัวอย่างของเรา):
.tooltip-local .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip-local:hover
.tooltiptext {
opacity: 1;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>