หน้านี้ได้รับการแปลโดย Cloud Translation API

ป๊อปอัป = คำแนะนำ

Keith Cirkel

Mason Freed

เผยแพร่เมื่อวันที่ 26 กุมภาพันธ์ 2025

Chrome 133 พัฒนาต่อจากฟีเจอร์ป๊อปอัปที่มีอยู่ด้วยการนำโหมดใหม่มาใช้งาน นั่นคือ popover="hint" โหมดที่จัดการโดยเบราว์เซอร์นี้เปิดใช้บริบทการซ้อนใหม่ที่ช่วยลดความซับซ้อนในการสร้างเคล็ดลับเครื่องมือและองค์ประกอบที่คล้ายกันซึ่งปรากฏชั่วขณะ ซึ่งช่วยลดความพยายามของนักพัฒนาแอปไปพร้อมกับคงความยืดหยุ่นของการออกแบบไว้

ข้อมูลเบื้องต้นและประวัติ

Popover API ซึ่งเปิดตัวใน Chrome 114 ช่วยให้คุณสร้าง UI แบบลอยตัวที่เข้าถึงได้ เช่น เมนูและเคล็ดลับเครื่องมือ โดยค่าเริ่มต้น popover="auto"จะจัดการฟังก์ชันการปิดไฟและการจัดการโฟกัสให้คุณโดยไม่ต้องใช้สคริปต์เพิ่มเติม ตามที่อธิบายไว้ในหัวข้อขอแนะนํา Popover API เมื่อเปิดป๊อปอัป popover="auto" ระบบจะปิดป๊อปอัปอื่นๆ ทั้งหมดที่ไม่ใช่ป๊อปอัปหลักซึ่งมี popover="auto" ซึ่งทำให้ API ใช้งานได้อย่างสะดวกและเหมาะสม

ป๊อปอัปที่ปิดป๊อปอัปอื่นๆ

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

ในตัวอย่างนี้ การเปิดป๊อปอัป 2 จะปิดป๊อปอัป 1 เนื่องจาก popover="auto" อนุญาตให้เปิดป๊อปอัปดังกล่าวได้ครั้งละ 1 รายการเท่านั้น

แม้ว่าลักษณะการทํางานนี้จะเหมาะกับเมนูและกล่องโต้ตอบ แต่อาจก่อให้เกิดปัญหาเมื่อ UI แบบลอยอยู่หลายประเภทต้องอยู่ร่วมกัน เช่น เมนูและเคล็ดลับเครื่องมือที่ใช้ popover="auto" ทั้งคู่อาจทับซ้อนกัน ซึ่งการเปิดเคล็ดลับเครื่องมือจะปิดเมนู สถานการณ์นี้อาจดูไม่ปกติ แต่เกิดขึ้นบ่อยครั้งใน UI สไตล์แอปพลิเคชันสมัยใหม่ ตัวอย่างเช่น เมนูในส่วนหัวของ github.com ใช้ป๊อปอัปสำหรับทั้งเมนูและเคล็ดลับเครื่องมือ ซึ่งช่วยให้ทั้ง 2 อย่างแสดงพร้อมกันได้ภายใต้เงื่อนไขบางอย่าง ดังนี้

วิธีแก้ปัญหาอย่างหนึ่งคือการใช้ popover="manual" สำหรับองค์ประกอบเคล็ดลับ ซึ่งช่วยให้ควบคุมป๊อปอัปได้อย่างเต็มรูปแบบด้วยสคริปต์ อย่างไรก็ตาม วิธีนี้จำเป็นต้องใช้ลักษณะการซ้อน การปิดไฟ และการจัดการโฟกัสอีกครั้ง ซึ่งเป็นงานที่ Popover API ออกแบบมาเพื่อจัดการโดยเฉพาะ ด้วยเหตุนี้ เราจึงหาวิธีขยาย API เพื่อมอบฟังก์ชันการทำงานที่ขาดหายไปนี้

จากการศึกษาของนักพัฒนาแอป เราพบบริบทการซ้อนที่พบบ่อย2 รายการ ได้แก่

UI แบบถาวร เช่น เมนูและกล่องโต้ตอบ
UI ที่แสดงชั่วคราว เช่น ฮิวเวอร์การ์ดและเคล็ดลับเครื่องมือ

popover="hint" จึงเปิดตัวกองซ้อนที่ 2 ซึ่งแตกต่างจาก popover="auto" เพื่อให้เมนูเปิดอยู่เสมอแม้ในขณะที่เคล็ดลับเครื่องมือปรากฏขึ้น แนวทางนี้ช่วยให้ทุกอย่างง่ายขึ้นด้วยการกำหนดหมวดหมู่กว้างๆ เพียง 2 หมวดหมู่ ได้แก่ UI แบบถาวร (auto) และUI แบบชั่วคราว (hint) แทนที่จะแนะนำบริบทการซ้อนหลายรายการสำหรับ UI ประเภทต่างๆ ซึ่งโดยพื้นฐานแล้วจะเป็นการคิดค้น z-index ขึ้นมาใหม่ แนวทางนี้ช่วยให้เกิดความสมดุลระหว่างความยืดหยุ่นและการหลีกเลี่ยงปัญหาเดิมๆ ที่คุณพบก่อนใช้ป๊อปอัป

ลักษณะการทํางานของค่าใหม่

ทั้ง popover="auto" และ popover="hint" รองรับการปิดเบาๆ ซึ่งหมายความว่าจะปิดโดยอัตโนมัติเมื่อผู้ใช้คลิกนอกกล่องโต้ตอบหรือกด Esc บนแป้นพิมพ์ ในแง่นี้ รูปแบบทั้ง 2 รูปแบบจึงเหมือนกัน

ในส่วนของการบังคับซ่อนป๊อปอัปอื่นๆ popover="auto" จะปิดป๊อปอัป auto และ hint อื่นๆ ทั้งหมดเมื่อเปิดขึ้น เพื่อให้มีป๊อปอัปดังกล่าวเพียงรายการเดียวที่ใช้งานอยู่ในแต่ละครั้ง (ข้อยกเว้นเดียวคือป๊อปอัปที่ฝังอยู่ ซึ่งอธิบายไว้ด้านล่าง) popover="hint" ในทางกลับกัน จะบังคับซ่อนเฉพาะป๊อปอัปอื่นๆ ของ hint เท่านั้น ซึ่งจะช่วยให้เมนูและเคล็ดลับเครื่องมือยังคงเปิดอยู่และแสดงร่วมกันได้

สิ่งที่แตกต่างกันมากที่สุดคือลักษณะการซ้อน popover="auto" รองรับการฝัง ซึ่งช่วยให้ป๊อปอัปย่อยเปิดอยู่ภายในป๊อปอัปหลักอีกรายการ popover="hint" มีลักษณะการฝังแบบพิเศษ ซึ่งก็คือ "กอง" ที่แยกต่างหาก เมื่อป๊อปอัป hint อยู่ภายในป๊อปอัป auto ป๊อปอัป hint จะเข้าร่วมกอง auto เพื่อรักษาการจัดกลุ่มตามบริบท ซึ่งหมายความว่าป๊อปอัปจะยังคงเปิดอยู่จนกว่าป๊อปอัป auto หรือ hint อื่นๆ จะบังคับให้ซ่อน วิธีนี้ช่วยให้ใช้งานได้ง่าย โดยเคล็ดลับเครื่องมือจะไม่รบกวนเมนูหรือป๊อปอัปอื่นๆ

สุดท้าย สำหรับ Use Case ที่แตกต่างออกไปมาก ก็มี popover="manual" อยู่เสมอ ซึ่งไม่มีลักษณะการทำงานเหล่านี้ในตัวอยู่แล้ว คุณจึงกำหนดฟังก์ชันการทำงานและลักษณะการทำงานที่ต้องการได้อย่างแม่นยำ

	`popover="auto"`	`popover="hint"`	`popover="manual"`
การปิดไฟ	ใช่	ได้	ไม่
บังคับซ่อน:	`auto` และ `hint` ที่ไม่เกี่ยวข้อง	`hint` ที่ไม่เกี่ยวข้อง	Nothing
การฝัง	ใช่	พิเศษ (อธิบายไว้ก่อนหน้านี้)	ไม่มี - ไม่มีไฟปิด

การทริกเกอร์ด้วยการวางเมาส์เหนือ

รูปแบบ UX ที่พบบ่อยคือเคล็ดลับเครื่องมือและโฮเวอร์การ์ดจะทริกเกอร์เมื่อวางเมาส์เหนือ การวางเมาส์เหนือองค์ประกอบที่น่าสนใจเป็นระยะเวลาหนึ่งจะทำให้นามบัตรลอยแสดงขึ้น ปัจจุบัน คุณต้องติดตั้งใช้งานลักษณะการทํางานดังกล่าวผ่าน JavaScript เช่น การเพิ่ม Listeners สําหรับเหตุการณ์ mouseenter และ mouseleave อย่างไรก็ตาม มี API อื่นที่อยู่ระหว่างการพัฒนาซึ่งควรทําให้การเรียกให้แสดงเมื่อวางเมาส์เหนือมีการประกาศอย่างชัดเจน นั่นคือ Interest Invokers API

API นี้ยังอยู่ระหว่างการพัฒนา แต่แนวคิดทั่วไปคือการเพิ่มแอตทริบิวต์ชื่อ interesttarget ให้กับองค์ประกอบหลายประเภท ซึ่งจะกำหนดลักษณะการทริกเกอร์ด้วยการวางเมาส์เหนือองค์ประกอบเหล่านั้น

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

เมื่อใช้ HTML ด้านบน การวางเมาส์เหนือลิงก์ <a> จะแสดงป๊อปอัป my-hovercard โดยอัตโนมัติ การย้ายเคอร์เซอร์ออกจากองค์ประกอบนั้นจะซ่อนป๊อปอัป ทั้งหมดนี้ทำได้โดยไม่ต้องใช้ JavaScript

ตัวอย่าง

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

ปุ่มที่มีเคล็ดลับเครื่องมือ — ลองใช้ฟีเจอร์นี้เลย

ตัวอย่างนี้ใช้ popover="hint" เพื่อสร้างเคล็ดลับเครื่องมือพื้นฐาน ซึ่งจะให้ข้อมูลเพิ่มเติมเกี่ยวกับปุ่มเมื่อวางเมาส์เหนือปุ่ม การเปิดใช้งานด้วยการวางเมาส์เหนือจะมีให้โดยตัวแฮนเดิลเหตุการณ์สําหรับ mouseenter และ mouseleave โดยจะมีการหน่วงเวลา 0.5 วินาที โปรดทราบว่าตัวอย่างนี้ไม่ได้จัดการรายละเอียดบางอย่าง

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

ข้อบกพร่องเหล่านี้แก้ไขได้ด้วย JavaScript เพิ่มเติม เช่น focus (หรืออาจต้องเพิ่มตัวแฮนเดิลเหตุการณ์ keydown และ keyup) เพื่อรองรับการเปิดใช้งานป๊อปอัปด้วยแป้นพิมพ์ ดูคำอธิบายเกี่ยวกับสิ่งที่ต้องจัดการอย่างถูกต้องเพื่อให้แน่ใจว่าผู้ใช้เข้าถึงเคล็ดลับเครื่องมือได้ได้ที่บล็อกโพสต์ที่ยอดเยี่ยมนี้จาก Sarah Higley ปัญหาเหล่านี้ทั้งหมด (และอื่นๆ) จะได้รับการแก้ไขโดยอัตโนมัติจากInterest Invokers API

ดูข้อมูลเพิ่มเติม

ดูรายละเอียดเพิ่มเติมได้ในคำอธิบายฟีเจอร์หรือข้อกำหนด HTML