HTML Popover API — tooltip และ dropdown โดยไม่ต้องเขียน JS เอง

ก่อนหน้านี้ต้องเขียน JS จัดการ show/hide, focus trap และ Escape key เอง ตอนนี้ browser ทำให้ได้:

<button popovertarget="menu">เปิดเมนู</button>

<div id="menu" popover>
  <p>เนื้อหา popover</p>
  <button popovertarget="menu" popovertargetaction="hide">ปิด</button>
</div>

สิ่งที่ browser จัดการให้:

• Light dismiss — คลิกนอก popover ปิดอัตโนมัติ
• Escape key — กด Esc ปิดทันที
• Top layer — แสดงเหนือทุก element โดยไม่ต้องยุ่งกับ z-index
• :popover-open — CSS selector สำหรับ animate เปิด/ปิด

[popover] { opacity: 0; transition: opacity 0.2s; }
[popover]:popover-open { opacity: 1; }

Support: Chrome 114+, Firefox 125+, Safari 17+ — ตรวจสอบได้ที่ caniuse.com/popover