Selama bertahun-tahun, pengembang antarmuka web terjebak dalam pola berulang yang melelahkan ketika membuat komponen dropdown atau menu pop-up. Mereka biasanya menggunakan elemen div dengan posisi absolut, nilai z-index yang tinggi, serta menambahkan baris kode JavaScript untuk mendeteksi klik di luar area dan penekanan tombol Escape. Praktik ini tidak hanya menambah beban kode, tetapi juga rawan kesalahan aksesibilitas.
Kini, platform web telah menghadirkan solusi native melalui Popover API yang mencapai status Baseline pada tahun 2024. Fitur ini tersedia di Chrome 114, Firefox 125, dan Safari 17, sehingga dapat digunakan secara luas tanpa khawatir tentang kompatibilitas mayoritas peramban modern. Artikel teknis dari Dev.to menyoroti bahwa dengan cukup menggunakan atribut popovertarget dan popover, sebuah tombol dapat membuka dan menutup elemen terkait tanpa satu pun baris JavaScript untuk logika dasar.
Dalam implementasi tradisional, pengembang harus mengelola status buka-tutup dengan hook seperti useState, memasang event listener mousedown pada dokumen, mengatur aria-expanded, serta menangani tombol Escape setelah audit aksesibilitas pertama. Keempat masalah tersebut—manajemen status, light dismiss, z-index, dan navigasi keyboard—sebenarnya adalah masalah tingkat peramban yang kini telah diselesaikan secara native.
Keunggulan teknis yang paling mendasar dari Popover API adalah rendering elemen ke dalam top layer (lapisan atas). Selama ini, dropdown sering hilang di belakang elemen lain karena konteks penumpukan (stacking context) yang dibentuk oleh transform, opacity, atau filter. Top layer adalah permukaan yang dikelola peramban dan berada di atas semua konteks penumpukan dalam dokumen, sehingga menu tidak lagi terpotong oleh parent overflow:hidden atau tertelan oleh elemen dengan transform.
Popover API menyediakan dua mode operasi: auto dan manual. Mode auto, yang merupakan nilai default, menerapkan light dismiss secara otomatis—hanya satu popover yang terbuka, klik di luar atau Escape akan menutupnya. Ini ideal untuk menu dan dropdown. Sebaliknya, mode manual cocok untuk toast atau peringatan di mana penutupan dikendalikan sepenuhnya oleh kode melalui showPopover() dan hidePopover(). API JavaScript juga melengkapi dengan togglePopover() serta pseudo-class :popover-open untuk penyesuaian gaya.
Tantangan animasi keluar-masuk juga terjawab dengan diperkenalkannya properti allow-discrete pada transisi CSS dan aturan @starting-style. Karena popover secara default menggunakan display:none saat tertutup, transisi biasa tidak dapat berjalan. Dengan kombinasi fitur tersebut, pengembang dapat membuat efek memudar dan bergeser secara halus tanpa merelokasi elemen ke dalam DOM secara manual.
Meskipun Popover API menyelesaikan banyak masalah, ada batasan yang perlu disadari. Penempatan cerdas seperti membalik posisi di atas trigger ketika ruang terbatas masih memerlukan pustaka seperti Floating UI atau CSS Anchor Positioning yang belum sepenuhnya lintas-peramban. Selain itu, pola menu yang benar-benar aksesibel dengan navigasi panah dan peran ARIA tetap menjadi tanggung jawab pengembang atau komponen headless.
Dari perspektif industri teknologi di Indonesia, adopsi API native ini sangat relevan. Banyak startup dan tim pengembang lokal masih mengandalkan framework berat yang memperlambat waktu muat halaman. Dengan beralih ke primitif peramban, mereka dapat mengurangi ukuran bundel JavaScript, meningkatkan performa, dan memenuhi standar aksesibilitas secara lebih mudah.
Pada akhirnya, kemunculan Popover API mengubah paradigma pembangunan komponen floating UI. Pengembang tidak lagi perlu menulis listener klik-di-luar untuk keseratus kalinya; cukup gunakan fitur yang sudah disediakan peramban. Langkah ini merupakan kemajuan signifikan menuju web yang lebih ringan, terstandardisasi, dan inklusif.