CSS Tooltip

เมื่อคุณออกแบบเว็บไซต์ คุณอาจตัดสินใจว่าต้องการแสดงข้อมูลเพิ่มเติมเกี่ยวกับบางสิ่งบนหน้าเว็บเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบบนไซต์

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

หากต้องการแสดงข้อมูลเกี่ยวกับบางสิ่งเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ คุณสามารถสร้างคำแนะนำเครื่องมือ ในบทช่วยสอนนี้ เราจะพูดถึงวิธีการสร้างคำแนะนำเครื่องมือใน CSS โดยอ้างอิงถึงตัวอย่าง เมื่ออ่านบทช่วยสอนนี้จบแล้ว คุณจะเป็นผู้เชี่ยวชาญในการสร้างคำแนะนำเครื่องมือใน CSS

คำแนะนำเครื่องมือ CSS

คำแนะนำเครื่องมือใช้เพื่อเพิ่มข้อมูลเกี่ยวกับองค์ประกอบบนหน้าเว็บ คำแนะนำเครื่องมือปรากฏในหลายๆ ตำแหน่งบนเว็บไซต์ โดยเฉพาะอย่างยิ่งเมื่อผู้เขียนเว็บไซต์ต้องการชี้แจงบางอย่างหรือเพิ่มคำจำกัดความให้กับคำในกลุ่มข้อความ

ไม่มีองค์ประกอบ HTML เริ่มต้นที่ใช้ในการสร้างคำแนะนำเครื่องมือ ดังนั้น เราต้องอาศัยการผสมผสานระหว่าง HTML และ CSS ในการออกแบบองค์ประกอบที่ดูเหมือนคำแนะนำเครื่องมือ

เริ่มต้นด้วยการเขียนโค้ด HTML สำหรับคำแนะนำเครื่องมือของเรา ในตัวอย่างนี้ เราจะสร้างคำแนะนำเครื่องมือสำหรับเว็บไซต์สูตร เมื่อผู้ใช้วางเมาส์เหนือคำว่า prepare the baking tray . คำแนะนำเครื่องมือควรปรากฏขึ้นพร้อมข้อความเพื่อเตือนผู้อ่านถึงวิธีการเตรียมถาดอบ

นี่คือโค้ด HTML สำหรับคำแนะนำเครื่องมือของเรา:

<html>

<div style="text-align:center;">
	<p>Instructions for baking:</p>
<div class="tooltip">Prepare the baking tray.
	<span class="contents">Line tray with greaseproof paper.</span>
<div>
</div>

อันดับแรก ในโค้ดของเรา เราได้สร้างแท็ก

ที่มี style ชุดแอตทริบิวต์ สไตล์ที่เรากำหนดจะจัดข้อความในแท็ก

ให้อยู่ตรงกลางขององค์ประกอบ (text-align:center) จากนั้น เราใช้แท็ก

เพื่อสร้างย่อหน้าที่มีข้อความ Instructions for baking: .

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ต่อไป เราสร้างตัวแบ่งซึ่งคำแนะนำเครื่องมือของเราจะปรากฏขึ้น นี่จะแสดงข้อความ prepare the baking tray . ภายในแท็ก

ของเรามีแท็ก ซึ่งมีข้อความที่เราต้องการให้ปรากฏเมื่อผู้ใช้วางเมาส์เหนือคำว่า prepare the baking tray .

ตอนนี้รหัสของเราแสดงข้อความทั้งหมดบนหน้าจอ เนื่องจากเรายังไม่ได้นำสไตล์ไปใช้กับโค้ดของเราเพื่อสร้างคำแนะนำเครื่องมือ นี่คือสไตล์ที่เราจะใช้เพื่อสร้างคำแนะนำเครื่องมือ CSS ของเรา:

<html>
  <div style="text-align:center;">
	<p>Instructions for baking:</p>
<div class="tooltip">Prepare the baking tray.
	<span class="contents">Line tray with greaseproof paper.</span>
<div>
</div>

<style>
.tooltip {
	display: inline-block;
	position: relative;
	margin: 50px;
}

.tooltip .tooltiptext {
	visibility: hidden;
 	width: 120px;
	background-color: lightblue;
	color: white;
	text-align: center;
	padding: 10px 0;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
}

.tooltip:hover .contents {
	visibility: visible;
}

CSS Tooltip ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราได้สร้างคำแนะนำเครื่องมือที่ทริกเกอร์เมื่อผู้ใช้วางเมาส์เหนือข้อความ prepare the baking tray . คำแนะนำเครื่องมือนี้ประกอบด้วยการเตือนสั้นๆ ถึงวิธีการเตรียมถาดอบสำหรับผู้อ่านเว็บไซต์ของเรา

มาดูกันว่าโค้ด CSS ทำงานอย่างไร คุณจะได้รู้ว่าคำแนะนำเครื่องมือข้อมูลของเราถูกสร้างขึ้นอย่างไร

.รูปแบบคำแนะนำเครื่องมือ

ขั้นแรก เราได้สร้างกฎของรูปแบบที่เรียกว่า .tooltip ซึ่งใช้กับแท็ก

ในโค้ด HTML ของเรา สไตล์นี้กำหนดองค์ประกอบเป็นคอนเทนเนอร์บล็อกระดับอินไลน์ ซึ่งหมายความว่าจะเริ่มในบรรทัดใหม่

นอกจากนี้เรายังตั้งค่าตำแหน่งของคำแนะนำเครื่องมือเป็นญาติ ซึ่งหมายความว่าคำแนะนำเครื่องมือจะอยู่ที่เดิมแม้ว่าหน้าจะเลื่อน คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการวางตำแหน่ง CSS ในคำแนะนำเกี่ยวกับตำแหน่ง CSS ของเรา

สุดท้าย เราระบุระยะขอบ 50px รอบข้อความคำแนะนำเครื่องมือ ซึ่งช่วยให้เราสร้างช่องว่างระหว่างข้อความคำแนะนำเครื่องมือและองค์ประกอบอื่นๆ บนหน้าเว็บได้ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับระยะขอบในคู่มือเริ่มต้นของเราเกี่ยวกับระยะขอบ CSS

.tooltip .contents สไตล์

ต่อไป เรากำหนดกฎของรูปแบบที่เรียกว่า .tooltip .contents ซึ่งใช้กับองค์ประกอบใดๆ ที่มีชื่อคลาส contents ซึ่งคลาสหลักมีชื่อ tooltip .

สำหรับตัวอย่างนี้ หมายความว่ากฎลักษณะนี้ใช้กับแท็ก ของเรา กฎนี้มีสไตล์สำหรับแอตทริบิวต์คำแนะนำเครื่องมือจริงของเรา

ในรูปแบบ .contents ของเรา เราระบุค่าของ visibility คุณสมบัติ hidden . ซึ่งหมายความว่า จนกว่าจะระบุไว้เป็นอย่างอื่น คำแนะนำเครื่องมือจะถูกซ่อนจากผู้ใช้

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

ในช่วงท้ายของกฎ .contents เราตั้งค่าการเติม 10px ซึ่งจะสร้างช่องว่างระหว่างข้อความในคำแนะนำเครื่องมือและเส้นขอบ เรายังตั้งค่ารัศมีเส้นขอบที่ 15px ซึ่งจะทำให้คำแนะนำเครื่องมือของเรามีเอฟเฟกต์มุมมน

ต่อไป เราตั้งค่าตำแหน่งขององค์ประกอบ .contents เป็น absolute ซึ่งหมายความว่าองค์ประกอบ .contents อยู่ในตำแหน่งที่สัมพันธ์กับองค์ประกอบหลัก ในกรณีนี้ องค์ประกอบหลักในโค้ด HTML ของเราคือแท็ก

ซึ่งหมายความว่าคำแนะนำเครื่องมือของเราจะปรากฏถัดจากแท็ก

ในโค้ดของเราเสมอ

.tooltip:hover .contents สไตล์

สุดท้าย เราได้กำหนดกฎที่เรียกว่า .tooltip:hover .contents กฎนี้ใช้เพื่อแสดงข้อความคำแนะนำเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบที่มีชื่อคลาส tooltip .

เมื่อดำเนินการกฎนี้ การมองเห็นองค์ประกอบ .contents จะถูกตั้งค่าเป็น visible . ซึ่งหมายความว่าเมื่อผู้ใช้วางเมาส์เหนือคำแนะนำเครื่องมือ คำแนะนำเครื่องมือจะปรากฏบนหน้าเว็บ

วางตำแหน่งคำแนะนำเครื่องมือ CSS

ในตัวอย่างข้างต้น คำแนะนำเครื่องมือของเราจะปรากฏทางด้านขวาของข้อความเมื่อผู้ใช้วางเมาส์เหนือป้ายกำกับ prepare the baking tray . อย่างไรก็ตาม เราสามารถปรับแต่งสิ่งนี้เพื่อให้คำแนะนำเครื่องมือของเราปรากฏที่ขอบต่างๆ ของข้อความ

ตำแหน่งที่ถูกต้อง

โค้ดของเราก่อนหน้านี้ได้วางคำแนะนำเครื่องมือไว้ทางด้านขวาของข้อความแล้ว อย่างไรก็ตาม หากเราได้จัดรูปแบบคำแนะนำเครื่องมือของเราให้ปรากฏในแบบอื่นแล้ว และต้องการย้ายคำแนะนำเครื่องมือของเรากลับไปยังตำแหน่งที่ถูกต้อง เราก็สามารถใช้โค้ดนี้:

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

กฎ CSS นี้ เมื่อรวมกับโค้ดของเราก่อนหน้านี้ จะวางคำแนะนำเครื่องมือไว้ทางด้านขวาของข้อความ ด้านบน:กฎ -5px จะจัดแนวคำแนะนำเครื่องมือให้อยู่ตรงกลางขององค์ประกอบคอนเทนเนอร์ ด้านซ้าย:กฎ 105% วางคำแนะนำเครื่องมือไว้ทางด้านขวาของคอนเทนเนอร์ เนื่องจากจะชดเชยตำแหน่งของคำแนะนำเครื่องมือไปทางซ้าย 105% ของความกว้างของคำแนะนำเครื่องมือ

รหัสของเราส่งคืน:

ดังที่คุณเห็น คำแนะนำเครื่องมือของเราปรากฏอยู่ทางด้านขวาของข้อความของเรา

ตำแหน่งซ้าย

สมมติว่าเราต้องการให้คำแนะนำเครื่องมือของเราปรากฏทางด้านซ้ายของข้อความ เราสามารถทำให้สิ่งนี้เกิดขึ้นได้โดยใช้รหัสต่อไปนี้:

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

เมื่อเพิ่มโค้ดนี้ในโค้ดของเราจากก่อนหน้านี้แล้ว โค้ดนี้จะวางตำแหน่งคำแนะนำเครื่องมือไว้ทางด้านซ้ายของข้อความ กฎด้านบน:-5px จะจัดแนวคำแนะนำเครื่องมือให้ตรงกับศูนย์กลางของคอนเทนเนอร์ ดังที่เราได้อธิบายไว้ในตัวอย่างที่แล้ว ด้านขวา:กฎ 105% ช่วยให้เราวางคำแนะนำเครื่องมือไว้ทางด้านซ้ายของคอนเทนเนอร์ (หรือให้ออฟเซ็ตตำแหน่งของคำแนะนำเครื่องมือไปทางขวา 105% ของความกว้างของคำแนะนำเครื่องมือ)

นี่คือสิ่งที่รหัสของเราส่งคืน:

คำแนะนำเครื่องมือของเราปรากฏทางด้านซ้ายของข้อความของเรา

ตำแหน่งบนสุด

สมมติว่าเราต้องการให้คำแนะนำเครื่องมือของเราปรากฏเหนือข้อความของเรา เราสามารถทำงานนี้ให้สำเร็จโดยใช้รหัสต่อไปนี้:

.tooltip .contents {
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ เราใช้รูปแบบ CSS สามรูปแบบเพื่อวางคำแนะนำเครื่องมือของเราไว้เหนือข้อความ ด้านล่าง:100% และด้านซ้าย:รูปแบบ 50% ช่วยให้เราสามารถชดเชยความกว้างของป้ายกำกับคำแนะนำเครื่องมือได้ 100% (prepare the baking tray ) จากด้านล่างและด้านซ้ายของป้ายกำกับคำแนะนำเครื่องมือตามลำดับ

รูปแบบระยะขอบซ้ายช่วยให้เราจัดคำแนะนำเครื่องมือให้อยู่ตรงกลาง เนื่องจากความกว้างของคำแนะนำเครื่องมือของเราคือ 120px เราจึงระบุค่า margin-left ที่ -60px (ครึ่งหนึ่งของ 120px) เพื่อให้แน่ใจว่าคำแนะนำเครื่องมือของเราปรากฏอยู่กึ่งกลางเหนือป้ายกำกับคำแนะนำเครื่องมือของเรา

ตำแหน่งล่าง

สมมติว่าเราต้องการให้คำแนะนำเครื่องมือของเราปรากฏใต้ prepare the baking tray . ฉลาก. เราสามารถทำได้โดยใช้รหัสนี้:

.tooltip .contents {
	top: 100%;
	left: 50%;
	margin-left: -60px;
}

รหัสของเราส่งคืน:

รหัสของเราใช้รูปแบบเดียวกับ Top Position ตัวอย่างโดยมีข้อยกเว้นประการหนึ่ง ในตัวอย่างนี้ เราใช้รูปแบบด้านบน:100% (แทนที่จะเป็นด้านล่าง:100% เหมือนที่เราใช้ในตัวอย่างที่แล้ว) รูปแบบนี้ช่วยให้เราออฟเซ็ตกล่องคำแนะนำเครื่องมือของเราได้ 100% ของความกว้างของป้ายกำกับคำแนะนำเครื่องมือ (prepare the baking tray .) ทำให้เราสามารถวางกล่องคำแนะนำเครื่องมือไว้ด้านล่างป้ายกำกับ

จางหายไปในคำแนะนำเครื่องมือ

เมื่อคุณออกแบบคำแนะนำเครื่องมือ คุณอาจตัดสินใจว่าคุณต้องการให้ข้อความคำแนะนำเครื่องมือจางลงเมื่อผู้ใช้วางเมาส์เหนือคำแนะนำเครื่องมือ วิธีนี้ช่วยให้คุณสร้างช่วงการเปลี่ยนภาพที่สวยงามยิ่งขึ้นเมื่อตั้งค่าคำแนะนำเครื่องมือให้ปรากฏบนหน้าจอของผู้ใช้

นี่คือสไตล์ที่คุณสามารถใช้สร้างคำแนะนำเครื่องมือแบบเฟดอินได้:

.tooltip .contents {
	opacity: 0;
	transition: opacity 2s;
}

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

สไตล์นี้เมื่อรวมกับโค้ดจากตัวอย่างแรกของเราแล้ว จะช่วยให้คุณได้เอฟเฟกต์แบบเฟดอิน มาดูกันว่ามันทำงานอย่างไร ขั้นแรก เราระบุความทึบของคำแนะนำเครื่องมือของเราเป็น 0 ซึ่งหมายความว่าคำแนะนำเครื่องมือถูกซ่อนไว้

จากนั้นเราระบุคุณสมบัติการเปลี่ยนด้วยสองค่า:ความทึบและ 2 วินาที opacity หมายถึงคุณสมบัติ CSS ที่เราต้องการใช้ในการเปลี่ยนแปลงของเรา และ 2s หมายถึงระยะเวลาของการเปลี่ยนแปลงของเรา (เป็นวินาที)

ต่อไป เราสร้างกฎ .tooltip:hover .contents ซึ่งตั้งค่าความทึบของคำแนะนำเครื่องมือของเราเป็น 1 เมื่อผู้ใช้วางเมาส์เหนือคำแนะนำเครื่องมือ

ซึ่งช่วยให้เราบรรลุผลเมื่อผู้ใช้วางเมาส์เหนือคำแนะนำเครื่องมือ องค์ประกอบจะเปลี่ยนจากการทึบแสงทั้งหมด (มองไม่เห็น) เป็นมองเห็นได้ทั้งหมด เนื่องจากเราระบุระยะเวลาการเปลี่ยนภาพเป็น 2 วินาที การเปลี่ยนแปลงนี้จะใช้เวลาสองวินาทีจึงจะเสร็จสมบูรณ์

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการเปลี่ยน CSS โปรดอ่านคำแนะนำของเราเกี่ยวกับคุณสมบัติการเปลี่ยน CSS

บทสรุป

คำแนะนำเครื่องมือใช้เพื่อแสดงข้อมูลเพิ่มเติมบนหน้าเว็บ ด้วยความช่วยเหลือจาก HTML และ CSS คุณสามารถออกแบบองค์ประกอบคำแนะนำเครื่องมือที่สวยงาม ซึ่งช่วยให้คุณแสดงข้อมูลเพิ่มเติมบนหน้าเว็บได้

บทช่วยสอนนี้สำรวจโดยอ้างอิงจากตัวอย่าง วิธีสร้างคำแนะนำเครื่องมือใน CSS และวิธีจัดตำแหน่งคำแนะนำเครื่องมือทางด้านซ้าย ขวา ด้านล่าง และด้านบนของป้ายกำกับ เรายังกล่าวถึงวิธีสร้างเอฟเฟกต์เฟดอิน ซึ่งจะเกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือป้ายกำกับคำแนะนำเครื่องมือ

ตอนนี้ คุณมีความรู้ที่จำเป็นในการเริ่มต้นออกแบบคำแนะนำเครื่องมือ CSS ของคุณเองอย่างนักออกแบบเว็บไซต์มืออาชีพ!