Popover API
สร้างคำแนะนำเครื่องมือและกล่องโต้ตอบด้วยแอตทริบิวต์ popover แบบเนทีฟ
Popover API เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
Popover API ทำอะไรได้บ้าง
Popover API ช่วยให้ HTML สร้างป๊อปโอเวอร์ กล่องโต้ตอบ คำแนะนำแบบลอย และเมนูได้ในตัว โดยไม่ต้องเขียน JavaScript เองสำหรับการจัดตำแหน่ง การจัดการโฟกัส การปิดเมื่อคลิกภายนอก หรือการปิดด้วยปุ่ม Escape พฤติกรรมในตัวสอดคล้องกับความคาดหวังของผู้ใช้
แอตทริบิวต์ popover
เพิ่ม popover ให้กับองค์ประกอบใด ๆ เพื่อเปลี่ยนองค์ประกอบนั้นเป็นป๊อปโอเวอร์ โดยค่าเริ่มต้นจะซ่อนไว้ ปุ่มเรียกใช้ที่มี popovertarget="popover-id" จะแสดงป๊อปโอเวอร์เมื่อคลิก เบราว์เซอร์จะจัดการสถานะเปิดและปิดโดยอัตโนมัติ
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>โหมดของป๊อปโอเวอร์
popover="auto" (ค่าเริ่มต้น) — ปิดเมื่อคลิกภายนอกหรือกด Escape และเปิดป๊อปโอเวอร์แบบอัตโนมัติได้ครั้งละหนึ่งรายการเท่านั้น popover="manual" — จะไม่ปิดโดยอัตโนมัติ ต้องสั่งปิดอย่างชัดเจนผ่าน JS หรือปุ่มเรียกใช้อื่น
ปุ่มเรียกใช้
แอตทริบิวต์ popovertarget จะเชื่อมปุ่มกับป๊อปโอเวอร์ผ่านรหัสประจำตัว เบราว์เซอร์จะจัดการพฤติกรรมการสลับให้: คลิกปุ่มเพื่อแสดง คลิกอีกครั้งหรือคลิกภายนอกเพื่อปิด ไม่ต้องมีตัวจัดการเหตุการณ์สำหรับการใช้งานพื้นฐาน
การแสดงผลบนชั้นบนสุด
ป๊อปโอเวอร์จะแสดงผลบนชั้นบนสุด เหนือเนื้อหาอื่นทั้งหมด โดยไม่ขึ้นกับ z-index หรือบริบทการซ้อนใด ๆ ซึ่งช่วยขจัดปัญหาคลาสสิกที่โมดัลถูกซ่อนไว้หลังองค์ประกอบแม่ที่มี overflow:hidden และมักเกิดกับป๊อปโอเวอร์ที่สร้างขึ้นเอง
การแสดงและซ่อนโดยใช้โค้ด
JavaScript สามารถแสดงหรือซ่อนป๊อปโอเวอร์ได้ด้วย element.showPopover(), element.hidePopover() และ element.togglePopover() โดยมีความหมายการทำงานเหมือนกับปุ่มเรียกใช้แบบประกาศ และการปิดเมื่อคลิกภายนอกยังทำงานต่อในโหมดอัตโนมัติ
เหตุการณ์ toggle
ป๊อปโอเวอร์จะส่งเหตุการณ์ toggle เมื่อสถานะเปลี่ยน ค่า newState ของเหตุการณ์จะเป็น "open" หรือ "closed" เหมาะสำหรับการวิเคราะห์การใช้งาน การจัดการโฟกัส หรือการประสาน UI อื่นกับสถานะเปิดของป๊อปโอเวอร์
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});ซูโดคลาสของ CSS
ซูโดคลาส :popover-open จะตรงกับป๊อปโอเวอร์ที่อยู่ในสถานะเปิด คุณสามารถกำหนดการเปลี่ยนผ่าน รูปแบบความทึบ และการแปลงตามสถานะนี้ได้ เช่น [popover]:popover-open { opacity: 1; transform: none; }
การจัดตำแหน่งด้วยจุดยึด
เมื่อใช้ร่วมกับ CSS Anchor Positioning API ป๊อปโอเวอร์จะจัดตำแหน่งให้สัมพันธ์กับปุ่มเรียกใช้โดยอัตโนมัติได้ ไม่ต้องใช้ JavaScript สำหรับรูปแบบทั่วไปอย่างคำแนะนำที่อยู่ใกล้ปุ่ม ทั้งสองความสามารถเป็นส่วนหนึ่งของแนวทางเดียวกันในการผลักดันกลไกพื้นฐาน UI สมัยใหม่
การช่วยการเข้าถึง
เบราว์เซอร์จะจัดการการกักโฟกัสสำหรับป๊อปโอเวอร์แบบโมดัล คืนโฟกัสไปยังปุ่มเรียกใช้เมื่อปิด และแจ้งสถานะเปิดของป๊อปโอเวอร์แก่โปรแกรมอ่านหน้าจอ การสร้างทั้งหมดนี้เองต้องใช้โค้ดโครงร่าง ARIA จำนวนมาก แต่ Popover API มอบความสามารถเหล่านี้ให้โดยไม่ต้องเขียนเพิ่ม
การรองรับจากเบราว์เซอร์
Chrome และ Safari รองรับ Popover API ส่วน Firefox เพิ่งเพิ่มการรองรับเมื่อไม่นานมานี้ มีโพลีฟิลล์ขนาดเล็กสำหรับความเข้ากันได้ที่กว้างขึ้น โปรเจกต์ใหม่สามารถใช้ความสามารถในตัวและเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับเบราว์เซอร์รุ่นเก่า
การแทนที่รูปแบบเดิม
ไลบรารีโมดัล JS จำนวนมาก เช่น sweetalert และ react-modal มีไว้เป็นหลักเพื่อแก้ข้อจำกัดที่ Popover API รองรับในตัวแล้ว ควรวางแผนย้ายมาใช้ เพราะจะได้ชุดโค้ดที่เล็กลง ค่าเริ่มต้นที่ดีกว่า และโค้ดที่ต้องดูแลน้อยลง Popover API เป็นหนึ่งในการปรับปรุง HTML ครั้งใหญ่ที่สุดในรอบหลายปี
ตรวจสอบความรู้
popover="auto" ทำอะไรได้บ้างที่ popover="manual" ทำไม่ได้
สรุป
Popover API เพิ่มแอตทริบิวต์ popover รวมถึง JS สำหรับ showPopover/hidePopover/togglePopover การเชื่อมปุ่มเรียกใช้ด้วย popovertarget การแสดงผลบนชั้นบนสุดเหนือบริบทการซ้อนทั้งหมด ซูโดคลาส :popover-open และเหตุการณ์ toggle โหมดอัตโนมัติจะปิดเมื่อคลิกภายนอก ส่วนโหมดแมนนวลต้องสั่งการอย่างชัดเจน ความสามารถนี้แทนที่ไลบรารีโมดัลและคำแนะนำแบบลอยที่สร้างเองส่วนใหญ่ด้วยกลไกพื้นฐานของ HTML เดียว ซึ่งจัดการการช่วยการเข้าถึง โฟกัส และ z-index ได้อย่างถูกต้อง
คำถามที่พบบ่อย
บทเรียน “Popover API” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Popover API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Popover API”
สร้างคำแนะนำเครื่องมือและกล่องโต้ตอบด้วยแอตทริบิวต์ popover แบบเนทีฟ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Popover API” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ