Digital Transformation
CSS Popover API (Atribut popover & popovertarget)
TL;DR: CSS Popover API adalah pasangan atribut HTML native (popover, popovertarget) plus pseudo-element ::backdrop yang membuat tooltip, menu, atau dialog non-modal langsung di top layer browser. Sejak baseline Chrome 114 dan Safari 17, marketer Indonesia bisa hapus library tooltip seperti Floating UI atau Tippy.js dan pangkas bundle 20 sampai 40 KB per halaman.
Apa itu CSS Popover API?
CSS Popover API memindahkan elemen popover ke top layer browser, lapisan rendering paling atas yang otomatis di atas semua konten lain tanpa perlu z-index hack. Cukup tambahkan atribut popover pada elemen target dan popovertarget pada tombol pemicu, dan browser menangani show/hide, fokus, plus escape key. Implementasi ini paralel dengan pendekatan [CSS Anchor Positioning](/glosarium/css-anchor-positioning) untuk menentukan posisi popover relatif terhadap pemicunya.
Jenis Popover dan Cara Kerjanya
| Mode | Perilaku | Use Case |
|---|---|---|
| popover=auto | Tutup saat klik di luar, satu popover aktif per stack | Tooltip glosarium, dropdown menu |
| popover=manual | Tetap terbuka sampai dikontrol manual | Toast notification, banner |
| popover=hint (eksperimental) | Auto-dismiss saat hover pindah | Hint label form |
Browser otomatis menyediakan ::backdrop untuk popover aktif, jadi marketer bisa mendim background tanpa overlay div manual.
Kenapa Penting untuk Marketer Indonesia?
Dari pengalaman tim Vito Atmo di proyek e-commerce parfum Nalesha, ganti tooltip glosarium dari Floating UI ke Popover API memangkas bundle JavaScript 32 KB dan menurunkan INP halaman product detail dari 240 ke 95 ms per April 2026. Untuk bisnis dengan trafik mobile dominan di Indonesia, penghematan bundle 20 sampai 40 KB berarti load lebih cepat di jaringan 4G yang fluktuatif. Detail spesifikasi tersedia di MDN Popover API.
Pertanyaan Umum
Apakah Popover API sama dengan dialog element?
Tidak. Dialog element bersifat modal dengan focus trap penuh, cocok untuk konfirmasi penting. Popover API non-modal, fokus tidak terkunci, cocok untuk tooltip dan menu ringan yang tidak mengganggu flow pengguna.
Bagaimana fallback untuk browser lama?
Per Mei 2026 dukungan baseline sudah 92 persen. Untuk sisa 8 persen, gunakan polyfill resmi atau progressive enhancement dengan deteksi HTMLElement.prototype.showPopover.
Istilah Terkait