Digital Transformation
HTML popover (Attribute)
TL;DR: HTML popover adalah atribut native browser yang membuat elemen seperti dropdown, tooltip, dan menu kontekstual muncul di top layer tanpa library JavaScript, lengkap dengan light-dismiss dan stack management bawaan. Sejak Chrome 114 dan Safari 17, atribut ini menghilangkan 80 sampai 95 persen kode boilerplate Floating UI atau Headless UI Popover.
Apa itu HTML popover?
HTML popover adalah atribut HTML yang mempromosikan elemen ke top layer browser, lapisan render khusus di atas seluruh konten halaman. Elemen dengan popover punya perilaku bawaan: light-dismiss (klik di luar menutup popover), Escape key handling, stack management untuk popover bertumpuk, dan integrasi accessibility otomatis melalui ARIA. Tidak butuh state manager, tidak butuh event listener, tidak butuh portal React.
Analogi sederhana: seperti <dialog> untuk modal, popover adalah primitive bawaan untuk UI mengambang. Pairkan dengan CSS position-try-fallbacks untuk auto-flip posisi adaptif.
Cara Pakai
Markup minimal:
<button popovertarget="menu">Buka Menu</button>
<div id="menu" popover="auto">
<a href="/artikel">Artikel</a>
<a href="/glosarium">Glosarium</a>
</div>
| Nilai popover | Perilaku |
|---|---|
auto | Light-dismiss aktif, hanya 1 popover auto aktif per stack |
manual | Tidak ada light-dismiss, harus ditutup eksplisit via JS |
hint (eksperimental) | Untuk tooltip, tidak menutup popover lain |
Bind ke trigger lewat popovertarget="id". Browser otomatis hide pakai display: none saat tertutup, dan auto-promote ke top layer saat terbuka. Styling state pakai pseudo-class :popover-open. Lihat juga CSS anchor-positioning untuk relasi posisi dengan trigger.
Kenapa Penting?
Untuk marketer Indonesia yang membangun navigasi mega-menu, dropdown filter produk, atau notifikasi inline, popover memangkas dependency seperti Radix Popover, Floating UI, atau Headless UI. Bundle JavaScript di landing page bisa berkurang 8 sampai 18 KB per fitur, dan masalah klasik z-index stacking hilang karena top layer di-handle browser. Praktik standar dari MDN Popover API menempatkan ini sebagai pengganti native untuk pola UI yang dulunya butuh library penuh.
Pertanyaan Umum
Apakah aman dipakai di production Indonesia?
Per Mei 2026, Chrome dan Safari sudah stabil, Firefox versi terbaru sudah support penuh. Untuk audiens dengan distribusi browser umum di Indonesia, coverage di atas 92 persen.
Apa bedanya dengan <dialog>?
<dialog> untuk modal yang menahan fokus dan butuh interaksi eksplisit. popover untuk UI mengambang yang bisa ditutup dengan klik di luar (light-dismiss) dan tidak menahan fokus paksa.
Istilah Terkait