การสร้างฟังก์ชันป๊อปโอเวอร์ด้วย Popover API

สรุปประเด็นสำคัญของ Popover API

แนะนำ Popover API

• Popover API มอบกลไกมาตรฐานที่สอดคล้องกันและยืดหยุ่นให้แก่นักพัฒนา สำหรับแสดงเนื้อหาป๊อปโอเวอร์เหนือเนื้อหาของหน้า
• เนื้อหาป๊อปโอเวอร์สามารถควบคุมแบบประกาศผ่านแอตทริบิวต์ HTML หรือควบคุมผ่าน JavaScript ได้

คุณลักษณะและวิธีใช้งานของ Popover

• ป๊อปโอเวอร์แบ่งได้เป็น 2 แบบคือ Modal และ Non-modal และป๊อปโอเวอร์ที่สร้างด้วย Popover API จะเป็นแบบ Non-modal เสมอ
  • Modal หมายถึงระหว่างที่ป๊อปโอเวอร์แสดงอยู่ ส่วนที่เหลือของหน้าจะถูกเรนเดอร์ให้ไม่สามารถโต้ตอบได้
  • Non-modal หมายถึงระหว่างที่ป๊อปโอเวอร์แสดงอยู่ ยังสามารถโต้ตอบกับส่วนอื่นของหน้าได้
• กรณีใช้งานทั่วไปของป๊อปโอเวอร์ ได้แก่ เมนูการทำงาน, การแจ้งเตือนแบบ "toast" ที่กำหนดเอง, คำแนะนำขององค์ประกอบฟอร์ม, ตัวเลือกเนื้อหา หรือ UI เพื่อการสอนใช้งาน
• ป๊อปโอเวอร์สามารถสร้างแบบประกาศผ่านแอตทริบิวต์ HTML หรือสร้างผ่าน JavaScript API ได้

แอตทริบิวต์ HTML ที่เกี่ยวข้องกับ Popover API

• popover: แอตทริบิวต์แบบ global ที่เปลี่ยนองค์ประกอบให้เป็นองค์ประกอบป๊อปโอเวอร์
• popovertarget: เปลี่ยนองค์ประกอบ <button> หรือ <input> ให้เป็นปุ่มควบคุมป๊อปโอเวอร์
• popovertargetaction: ระบุการทำงานที่จะดำเนินการกับองค์ประกอบป๊อปโอเวอร์ที่ถูกควบคุมโดย <button> หรือ <input> ควบคุม

ความสามารถของ CSS ที่เกี่ยวข้องกับ Popover API

• ::backdrop: องค์ประกอบแบบเต็มหน้าจอที่วางอยู่ด้านหลังองค์ประกอบป๊อปโอเวอร์โดยตรง ซึ่งสามารถใช้เพิ่มเอฟเฟกต์ให้กับเนื้อหาหน้าด้านหลังป๊อปโอเวอร์ได้หากต้องการ
• :popover-open: pseudo-class ที่ตรงกันเฉพาะตอนที่องค์ประกอบป๊อปโอเวอร์อยู่ในสถานะแสดงผล และใช้กำหนดสไตล์เมื่อป๊อปโอเวอร์แสดงอยู่ได้

อินเทอร์เฟซและส่วนขยายที่เกี่ยวข้องกับ Popover API

• ToggleEvent: อีเวนต์ที่ใช้แจ้งให้ทราบเมื่อสถานะขององค์ประกอบป๊อปโอเวอร์สลับระหว่างการแสดงและการซ่อน
• มีการเพิ่ม instance property เช่น HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction
• มีการเพิ่ม instance method เช่น HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover()
• มีการเพิ่มอีเวนต์ beforetoggle, toggle

ความเห็นของ GN⁺

• Popover API มีความหมายในแง่ที่มอบวิธีการมาตรฐานสำหรับให้นักพัฒนาเว็บสร้าง UI แบบป๊อปโอเวอร์ได้ง่ายขึ้น ก่อนหน้านี้มักต้องใช้ไลบรารีหรือพัฒนาเอง
• อย่างไรก็ตาม ควรคำนึงด้วยว่า Popover API ยังเป็นฟีเจอร์เชิงทดลองและการรองรับของเบราว์เซอร์ยังมีจำกัด หากต้องการใช้ในสภาพแวดล้อมโปรดักชัน อาจต้องพิจารณาใช้ polyfill หรือใช้งานร่วมกับไลบรารีเดิม
• ไลบรารีที่ให้ความสามารถคล้ายกัน ได้แก่คอมโพเนนต์ Popover ของ Bootstrap และ Tippy.js
• เมื่อต้องใช้ Popover API ควรคำนึงถึงด้านการเข้าถึงด้วย ต้องสามารถควบคุมป๊อปโอเวอร์ด้วยคีย์บอร์ดได้ และควรมีข้อความทางเลือกสำหรับผู้ใช้ screen reader

[GN⁺]

ความคิดเห็นจาก Hacker News

สรุปได้ดังนี้

• เมื่อมีการนำ CSS Anchor Positioning มาใช้ ก็จะสามารถผสานกับ Popover API เพื่อสร้างทูลทิปแบบกำหนดเองหรือเมนูคลิกขวาในลักษณะเชิงประกาศได้ ทำให้ไม่จำเป็นต้องใช้ไลบรารีอย่าง PopperJS อีกต่อไป
• หากต้องการโมดัลไดอะล็อก ก็สามารถใช้เอลิเมนต์ <dialog> ได้เช่นกัน
• ปัจจุบัน popover ยังมีข้อจำกัดในการใช้งาน เช่น ไม่สามารถล้ำออกนอกขอบหน้าต่างเบราว์เซอร์ได้ และยังทำงานร่วมกับระบบหน้าต่างของโฮสต์ OS ได้ไม่ดีนัก ทำให้มีข้อจำกัดด้านการใช้งานจริง หากจะทำให้สมบูรณ์จริง บน Win32 น่าจะต้องมี HWND แยกสำหรับแต่ละ popover และบน macOS ก็จะต้องใช้ NSView
• เป็นเรื่องน่าขันอยู่เหมือนกันที่เบราว์เซอร์มีตัวบล็อกป๊อปอัปอยู่แล้ว แต่กลับสร้าง API แบบนี้ขึ้นมา ทำให้นึกถึงสงครามโฆษณาแบบป๊อปอัป/ป๊อปอันเดอร์ช่วงปลายยุค 90 ถึงต้นยุค 2000
• หากใช้ Popover API ก็จะยิ่งทำให้ส่วนขยายสามารถเล็งเป้าหมายเพื่อบล็อกได้ง่ายขึ้น และน่าจะถูกใช้ในทางที่ผู้ใช้ไม่ชอบเป็นหลัก เช่น CTA ทางการตลาดหรือแชตช่วยเหลือที่รบกวนการใช้งาน
• มีคนบอกว่าถ้าอยากทำให้ Popover เป็นโมดัลก็ควรใช้เอลิเมนต์ <dialog> แต่ในกรณีอย่างการทำพื้นหลังให้เบลอ การทำ popover ให้เป็นโมดัลก็ถือเป็นยูสเคสที่เหมาะสม แบบ <popover modal=true> จะไม่ดีกว่าหรือ?
• มีการแชร์โค้ดตัวอย่างที่ทำแบบคัสตอมด้วย Stimulus + Popper
• มีการชี้ว่าบนหน้าไม่มีรูปที่แสดงให้เห็นว่า Popover คืออะไร
• มีปฏิกิริยาในเชิงทึ่งกับการมาของ Popover API