Digital Transformation
Popover API
TL;DR: Popover API adalah fitur HTML native yang dirilis Chrome 114 (Mei 2023) dan kini didukung semua browser modern. Cukup tambahkan atribut
popoverpada elemen danpopovertargetpada tombol pemicu, browser akan menangani open/close, fokus, dan rendering top-layer secara otomatis. Cocok untuk tooltip, dropdown menu, dan modal kecil tanpa library tambahan.
Apa itu Popover API?
Popover API adalah set atribut HTML yang membuat elemen apa pun bisa muncul sebagai overlay di atas konten lain. Browser merender popover di top-layer, lapisan khusus yang berada di atas seluruh dokumen, sehingga tidak terpengaruh overflow: hidden atau konflik z-index yang biasanya jadi masalah utama saat membangun komponen overlay manual.
Analogi sederhananya seperti sticky note. Dulu, untuk menempel catatan di atas dokumen, Anda perlu lem khusus, perhitungan posisi, dan trik kertas. Popover API memberi Anda sticky note bawaan, cukup pasang dan otomatis menempel di lapisan teratas.
Cara Kerja
| Atribut | Fungsi |
|---|---|
popover | Menandai elemen sebagai popover (auto atau manual) |
popovertarget | ID elemen popover yang akan dipicu oleh tombol |
popovertargetaction | Aksi: toggle, show, atau hide |
Mode auto otomatis menutup popover saat klik di luar (light dismiss). Mode manual butuh kontrol eksplisit, cocok untuk notifikasi.
Kenapa Penting untuk Marketer dan Developer Indonesia?
Komponen modal dan dropdown adalah salah satu sumber bug paling sering di website bisnis. Library seperti Headless UI atau Radix bagus, tapi menambah 8-15 KB JavaScript dan kadang konflik dengan responsive design di mobile. Popover API memangkas bundle size dan menghilangkan risiko z-index pecah saat ditambah komponen ketiga, situasi yang sering muncul di e-commerce dengan banyak modal promo.
Per pengalaman membangun halaman promo, mengganti modal library dengan Popover API biasanya memangkas 6-12 KB initial bundle dan menghilangkan satu kelas bug rendering yang sulit didebug.
Pertanyaan Umum
Apakah Popover API sudah didukung Safari?
Ya. Safari 17 (September 2023) sudah mendukung penuh. Per Mei 2026, cakupan browser sudah di atas 94% berdasarkan caniuse.com, aman untuk produksi dengan fallback sederhana.
Apakah Popover API bisa untuk dialog konfirmasi?
Bisa, tapi untuk dialog modal dengan focus trap dan blocking interaction, elemen <dialog> lebih tepat. Popover lebih cocok untuk menu, tooltip, dan notifikasi non-blocking.