Implementasi fitur popover melalui Popover API

Ringkasan poin utama Popover API

Pengenalan Popover API

• Popover API menyediakan mekanisme yang standar, konsisten, dan fleksibel bagi developer untuk menampilkan konten popover di atas konten halaman
• Konten popover dapat dikontrol secara deklaratif menggunakan atribut HTML atau melalui JavaScript

Karakteristik dan cara penggunaan Popover

• Popover dibagi menjadi dua jenis, yaitu modal dan non-modal, dan popover yang dibuat dengan Popover API selalu bersifat non-modal
  • Modal berarti sisa bagian halaman dirender sebagai non-interaktif selama popover ditampilkan
  • Non-modal berarti pengguna tetap dapat berinteraksi dengan bagian halaman lainnya selama popover ditampilkan
• Contoh penggunaan popover yang umum meliputi menu aksi, notifikasi "toast" kustom, saran elemen formulir, pemilih konten, atau UI edukatif
• Popover dapat dibuat secara deklaratif melalui atribut HTML atau melalui JavaScript API

Atribut HTML terkait Popover API

• popover: atribut global yang mengubah elemen menjadi elemen popover
• popovertarget: mengubah elemen <button> atau <input> menjadi tombol pengendali popover
• popovertargetaction: menentukan aksi yang dilakukan pada elemen popover yang dikendalikan oleh <button> atau <input> pengendali

Fitur CSS terkait Popover API

• ::backdrop: elemen layar penuh yang ditempatkan tepat di belakang elemen popover, yang dapat digunakan untuk menambahkan efek pada konten halaman di belakang popover jika diinginkan
• :popover-open: pseudo-class yang hanya cocok saat elemen popover dalam keadaan ditampilkan, dan dapat digunakan untuk menerapkan gaya ketika elemen popover muncul

Antarmuka dan ekstensi terkait Popover API

• ToggleEvent: merepresentasikan event yang memberi tahu pengguna ketika status elemen popover berubah antara tampil dan tersembunyi
• Ditambahkan instance property seperti HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction
• Ditambahkan instance method seperti HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover()
• Ditambahkan event beforetoggle, toggle

Opini GN⁺

• Popover API bermakna karena menyediakan cara yang terstandarisasi bagi developer web untuk mengimplementasikan UI popover dengan mudah. Sebelumnya, hal ini biasanya memerlukan library atau implementasi manual
• Namun, perlu dipertimbangkan bahwa Popover API masih merupakan fitur eksperimental dan dukungan browser masih terbatas. Untuk penggunaan di lingkungan produksi, ada baiknya mempertimbangkan polyfill atau penggunaan bersama library yang sudah ada
• Library yang menyediakan fungsi serupa antara lain komponen Popover dari Bootstrap dan Tippy.js
• Saat menggunakan Popover API, aspek aksesibilitas juga perlu diperhatikan. Popover harus dapat dikendalikan dengan keyboard, dan teks alternatif untuk pengguna screen reader juga harus disediakan

[GN⁺]

Opini Hacker News

Ringkasnya sebagai berikut.

• Jika CSS Anchor Positioning diperkenalkan, dikombinasikan dengan Popover API akan memungkinkan implementasi tooltip kustom atau menu konteks secara deklaratif, sehingga library seperti PopperJS tidak lagi diperlukan.
• Jika menginginkan dialog modal, elemen <dialog> juga bisa digunakan.
• Saat ini popover memiliki keterbatasan implementasi karena tidak terintegrasi dengan baik dengan sistem windowing OS host, misalnya tidak bisa melampaui batas jendela browser. Untuk mengimplementasikannya dengan benar, di Win32 kemungkinan diperlukan HWND terpisah untuk setiap popover, dan di macOS diperlukan NSView.
• Agak ironis browser memiliki pemblokir pop-up tetapi juga membuat API seperti ini. Ini mengingatkan pada perang iklan pop-up/pop-under di akhir 1990-an hingga awal 2000-an.
• Dengan Popover API, pemblokiran melalui ekstensi akan menjadi lebih mudah untuk ditargetkan. Kemungkinan besar ini akan banyak digunakan untuk hal-hal yang tidak disukai pengguna, seperti CTA pemasaran atau chat dukungan yang mengganggu.
• Jika ingin membuat Popover menjadi modal, memang disarankan memakai elemen <dialog>, tetapi untuk kasus seperti membuat latar belakang menjadi blur, menjadikan popover sebagai modal adalah use case yang masuk akal. Bukankah <popover modal=true> akan menjadi pendekatan yang lebih baik?
• Dibagikan contoh kode implementasi kustom dengan Stimulus + Popper.
• Ada komentar bahwa halaman tersebut tidak memiliki gambar yang menunjukkan apa itu Popover.
• Reaksi kagum atas kemunculan Popover API.