Digital Transformation
HTML Popover API (Atribut popover)
TL;DR: HTML Popover API adalah atribut HTML native (popover="auto" atau popover="manual") yang menempatkan elemen di top layer browser tanpa library JavaScript. Tersedia stabil di Chrome 114+, Safari 17+, Firefox 125+ sejak 2024. Cocok untuk modal lead, tooltip produk, dan menu kontekstual.
Apa itu HTML Popover API?
HTML Popover API adalah primitif browser native untuk menampilkan elemen di lapisan paling atas halaman. Sebelum ada API ini, marketer dan developer perlu library seperti Tippy, Floating UI, atau Headless UI untuk modal dan tooltip. Sekarang cukup tambahkan atribut popover ke elemen tujuan dan popovertarget ke tombol pemicu, semua state management ditangani browser.
API ini berbeda dari CSS field-sizing yang fokus ke form, dan saling melengkapi dengan Partial Prerendering Next.js untuk hidrasi minimal di halaman lead.
Tiga Mode Atribut
| Mode | Perilaku | Use Case |
|---|---|---|
popover="auto" | Tutup otomatis saat klik di luar atau Esc | Modal lead form, kuis singkat |
popover="manual" | Hanya tutup via JavaScript eksplisit | Tooltip kontekstual produk |
popover="hint" | Antri di stack hint, tidak konflik dengan modal | Bubble onboarding step |
Untuk styling, gunakan pseudo-class :popover-open dan selector ::backdrop agar tampil konsisten dengan brand. Praktik standar di industri mengkombinasikan API ini dengan transition CSS untuk animasi masuk-keluar.
Kenapa Penting?
Untuk landing page bisnis dan personal branding di Indonesia, mengurangi JavaScript berarti LCP lebih cepat dan biaya bandwidth lebih rendah, terutama di koneksi 4G dengan rata-rata RTT 80 sampai 140 milidetik. Berdasarkan praktik Web Vitals yang Vito Atmo pakai di proyek client, mengganti library modal dengan Popover API memangkas 12 sampai 28 kilobyte JavaScript per halaman.
Dokumentasi lengkap tersedia di MDN Popover API.
Pertanyaan Umum
Apakah Popover API menggantikan Headless UI atau Radix?
Tidak sepenuhnya. Popover API menangani modal sederhana dan tooltip. Library seperti Radix masih unggul untuk pola kompleks seperti combobox dengan keyboard navigation lengkap. Untuk landing page dan lead form, Popover API sudah cukup.
Apakah Next.js perlu konfigurasi khusus?
Tidak. Atribut popover bekerja di JSX langsung. Cukup pastikan target browser Anda mendukung. Per April 2026, dukungan browser sudah di atas 92 persen pengguna global menurut data Caniuse.
Istilah Terkait