Mengimplementasikan Popover dengan Popover API

 (developer.mozilla.org)
2 poin oleh GN⁺ 2024-05-11 | 1 komentar | Bagikan ke WhatsApp
  • Dapat membuat UI popover yang muncul di atas halaman hanya dengan fitur bawaan browser, sehingga pola seperti menu, saran, dan notifikasi bisa diimplementasikan dengan lebih konsisten
  • Popover dari Popover API selalu non-modal, jadi untuk UI yang perlu memblokir interaksi halaman, `` lebih cocok
  • Toggle sederhana ditangani dengan atribut HTML seperti popover, popovertarget, dan popovertargetaction; jika perlu, status tampilnya dapat dikontrol dengan metode JavaScript
  • Perubahan gaya dan status dapat ditangani dengan ::backdrop, :popover-open, beforetoggle, toggle, dan lainnya; interest invokers mendukung tampilan saat hover/focus tanpa JavaScript
  • Ini adalah fitur Baseline 2025 yang berjalan di perangkat dan browser terbaru sejak Januari 2025, tetapi kompatibilitas untuk lingkungan lama atau beberapa fitur detail tetap perlu diperiksa

Masalah yang Diselesaikan Popover API

  • Popover API menyediakan mekanisme standar untuk menampilkan konten popover di atas konten halaman lain
  • Popover dapat dikontrol hanya dengan atribut HTML, atau status tampil/sembunyinya dapat ditangani langsung dengan JavaScript API
  • Pola UI yang di web sering disebut overlays, popups, popovers, dialogs, dan sebagainya dapat diimplementasikan lebih konsisten dengan fitur bawaan browser

Jika Memerlukan Modal, Gunakan ``

  • UI popover secara umum dibagi menjadi modal dan non-modal
    • Modal tidak memungkinkan interaksi dengan bagian halaman lainnya selama popover ditampilkan
    • Non-modal tetap memungkinkan interaksi dengan bagian halaman lainnya meskipun popover sedang muncul
  • Popover yang dibuat dengan Popover API selalu non-modal
  • Jika membutuhkan popover modal yang memblokir interaksi halaman, elemen `` lebih cocok
  • Cara menerapkan popover pada seperti juga valid, dan memungkinkan penggunaan kontrol popover bersama semantik dialog

Cara Penggunaan Dasar

  • Popover API sering dapat digunakan untuk UI yang membutuhkan interaksi pengguna
    • Menu aksi
    • Notifikasi toast kustom
    • Saran elemen form
    • Pemilih konten
    • UI edukasi
  • Tombol toggle popover sederhana dapat dibuat hanya dengan HTML
Toggle the popover
Popover content
  • Di JavaScript, HTMLElement.togglePopover() mengalihkan status tampil/sembunyi popover
  • API ini juga menyediakan event yang merespons perubahan status popover dan fitur CSS yang membantu styling

Atribut HTML

  • interestfor
    • Mendefinisikan elemen HTML , , atau elemen SVG sebagai interest invoker
    • Nilainya adalah id elemen target, dan elemen target akan terpengaruh ketika interest ditampilkan atau hilang dari elemen invoker
  • popover
    • Atribut global yang mengubah elemen menjadi elemen popover
    • Dapat menerima status "auto", "hint", "manual" sebagai nilai
  • popovertarget
    • Menjadikan elemen atau sebagai tombol kontrol popover
    • Nilainya adalah ID elemen popover yang akan dikontrol
  • popovertargetaction
    • Menentukan tindakan yang akan dilakukan tombol kontrol terhadap popover
    • Nilai yang mungkin adalah "hide", "show", "toggle"

Menangani Status Tampilan dengan CSS

  • ::backdrop
    • Pseudo-element layar penuh yang ditempatkan tepat di belakang elemen popover
    • Jika perlu, dapat memberi efek seperti blur pada konten halaman di belakang popover
  • interest-delay, interest-delay-start, interest-delay-end
    • Menambahkan waktu tunda antara saat pengguna menunjukkan atau kehilangan interest dan saat browser bereaksi
  • :interest-source, :interest-target
    • Saat interest ditampilkan, gaya dapat diterapkan masing-masing pada invoker dan elemen target yang terhubung dengannya
  • :popover-open
    • Pseudo-class yang hanya cocok ketika elemen popover sedang ditampilkan
    • Digunakan untuk styling popover dalam status terbuka

Antarmuka JavaScript dan Ekstensi DOM

  • InterestEvent
    • Objek event untuk event interest dan loseinterest
    • Mencakup properti source yang berisi referensi ke elemen interest invoker yang terhubung
  • ToggleEvent
    • Merepresentasikan event yang terjadi ketika elemen popover beralih antara status tampil dan sembunyi
    • Objek event untuk event beforetoggle dan toggle
  • interestForElement
    • Mengambil atau mengatur referensi elemen yang menjadi target interest invoker
    • Dapat digunakan pada HTMLButtonElement, HTMLAnchorElement, HTMLAreaElement, SVGAElement
  • HTMLElement.popover
    • Mengambil atau mengatur status popover elemen dengan JavaScript
    • Menggunakan nilai "auto", "hint", "manual", dan juga dimanfaatkan untuk deteksi fitur
    • Mencerminkan nilai atribut global HTML popover
  • popoverTargetElement
    • Pada HTMLButtonElement dan HTMLInputElement, mengambil atau mengatur elemen popover yang dikontrol oleh tombol kontrol
    • Merupakan padanan JavaScript untuk atribut HTML popovertarget
  • popoverTargetAction
    • Pada HTMLButtonElement dan HTMLInputElement, mengambil atau mengatur tindakan popover yang akan dilakukan
    • Menggunakan nilai "hide", "show", "toggle" dan mencerminkan atribut popovertargetaction

Metode dan Event

  • HTMLElement.hidePopover()
    • Menghapus elemen popover dari top layer dan menyembunyikannya dengan styling display: none
  • HTMLElement.showPopover()
    • Menambahkan elemen popover ke top layer untuk menampilkannya
  • HTMLElement.togglePopover()
    • Mengalihkan elemen popover antara status tampil dan sembunyi
  • beforetoggle
    • Terjadi tepat sebelum status elemen popover berubah antara tampil dan sembunyi
    • Dapat digunakan untuk mencegah popover dibuka, atau memperbarui elemen lain sesuai status popover
  • toggle
    • Terjadi tepat setelah status elemen popover berubah
  • interest
    • Terjadi ketika interest ditampilkan pada elemen target milik interest invoker
  • loseinterest
    • Terjadi ketika interest menghilang dari elemen target milik interest invoker

Contoh dan Tautan Spesifikasi

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-11
Komentar di Hacker News

  • Popover API tampaknya akan membawa perubahan yang sangat besar begitu CSS Anchor Positioning ikut hadir
    Anchor positioning memungkinkan elemen ditempatkan relatif terhadap elemen lain di halaman
    Jika digabungkan dengan Popover API, tooltip kustom atau menu konteks bisa diimplementasikan secara deklaratif, dan library seperti PopperJS pun tidak lagi diperlukan
    https://developer.chrome.com/blog/tether-elements-to-each-ot...
    https://popper.js.org/docs/v2/

    • Baru saja menerbitkan artikel baru yang membahas cara memakai CSS Anchor API, dan rencananya akan masuk ke Chromium minggu depan
      https://developer.chrome.com/blog/anchor-positioning-api
    • Status dukungan browser bisa dilihat di sini
      https://caniuse.com/css-anchor-positioning
    • Seandainya CSS Anchor Positioning sudah ada selama beberapa tahun terakhir, waktu yang bisa dihemat pasti luar biasa banyak
    • Inilah bagian inti yang hilang
      Minggu lalu saya mencoba membuat dan merilis sesuatu dengan Popover API baru, tetapi kurangnya dukungan positioning di semua browser membuat use case-nya sangat terbatas
      Firefox sebagai browser terakhir tampaknya sudah memasukkan anchor positioning di versi beta, jadi sepertinya tidak akan lama lagi
    • Mengejutkan bahwa pada 2024 HTML/CSS belum punya atribut tooltip seperti title

  • Kalau membutuhkan dialog modal, ada juga elemen <dialog>
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

    • Jika butuh konten expand/collapse, atau dengan sedikit pemaksaan untuk “dropdown”, <details> juga bisa dipakai
      Anehnya, tidak seperti <dialog> atau <details>, <popover> tampaknya tidak bisa dibuat dalam keadaan open secara deklaratif hanya dengan atribut
      Rasanya seperti fitur yang hilang, dan semoga keputusan ini punya dasar yang jelas
      https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
    • Saya ingin memperingatkan bahwa untuk membuat animasi dan perilaku modal umum sesuai ekspektasi saat ini, dibutuhkan cukup banyak pekerjaan
      Memang sepenuhnya memungkinkan, tetapi sama sekali bukan pekerjaan sepele
    • Seperti yang sudah disebutkan, animasi memang lebih sulit, tetapi aksesibilitas sudah tersedia, dan mendukung penutupan dengan tombol Esc, backdrop bawaan, serta focus trap bawaan
      Dukungan Safari memang butuh waktu, tetapi sekarang sudah bisa dipakai di mana-mana
      Menurut saya ini lebih baik daripada merangkai tag sendiri
    • Ini sudah dibahas di beberapa paragraf awal artikel

  • Jika diimplementasikan bersama sistem jendela milik sistem operasi host, fitur ini jelas tampak diperlukan
    Sebab saat ini popover selalu harus ditiru dengan cara yang tidak selalu bekerja baik
    Misalnya <select> native browser bisa melebar melewati batas jendela browser, sehingga tidak perlu khawatir terpotong oleh jendela, tetapi select palsu yang mewah dari toolkit seperti Quasar tidak bisa begitu, sehingga pilihan penempatannya terbatas
    Untuk melakukannya dengan benar, di win32 setiap popover tampaknya harus memiliki HWND native-nya sendiri, dan di Cocoa/macOS harus berada di dalam NSView tersendiri
    Saya penasaran apakah browser saat ini benar-benar mengimplementasikannya seperti ini, atau hanya menggambarnya di dalam jendela browser

    • Popover ini hanyalah node DOM biasa dan diberi style dengan CSS biasa
      Jika situs web diizinkan menggambar di luar viewport yang ditentukan, selain kasus yang sangat terbatas seperti alert(), confirm(), dan [title], akan jauh lebih mudah meniru dialog browser atau sistem operasi secara meyakinkan
      Misalnya, sebuah halaman bisa meniru widget unlock dari ekstensi password manager
      Ini risiko keamanan besar, dan menurut saya tidak sepadan dibanding manfaatnya yang terbatas
      Ini bukan kekhawatiran teoretis
      Selama bertahun-tahun, penipu telah membuat UI palsu yang sangat meyakinkan, termasuk jendela popup palsu lengkap dengan chrome browser, bahkan bisa diseret
      Fakta bahwa mereka tidak bisa menggambar di luar batas viewport adalah hampir satu-satunya batasan yang belum bisa mereka lewati
    • Saya tidak tahu seberapa berguna fitur seperti itu secara realistis
      Di perangkat kecil, browser web hampir selalu memenuhi seluruh layar, dan bahkan di monitor besar biasanya setidaknya menyentuh salah satu sudut
    • Secara semantik juga sepertinya akan lebih mudah dideteksi
      Begitu juga untuk aksesibilitas dan crawlability, serta berguna jika seseorang ingin membuat plugin “pemblokir popup”
    • Secara teknis Firefox mendukung kemampuan untuk membuat sebagian konten halaman “keluar” sebagai jendela level sistem operasi terpisah
      Fitur ini diekspos melalui elemen XUL yang hanya bisa dipakai oleh [X]HTML berhak istimewa yang dirender di proses utama browser
      Sepertinya tidak ada pengembang browser yang ingin memberi halaman web biasa izin untuk membuat jendela sistem operasi tanpa border
    • Sepertinya web app tidak akan segera mendapatkan integrasi sistem jendela native seperti yang dibayangkan
      Fakta bahwa beberapa kontrol standar berperilaku seperti itu adalah efek samping implementasi spesifik OS karena diimplementasikan secara native oleh sistem operasi, dan tidak berarti harus selalu diimplementasikan begitu

  • Browser memiliki pemblokir popup bawaan, jadi agak lucu juga mereka membuat API seperti ini
    Saya tahu ada perbedaannya, tapi tetap saja
    Saya sudah cukup tua untuk mengingat perang popup/popunder pada akhir 90-an dan awal 2000-an
    Sepertinya pertempuran itu sudah dimenangkan, tetapi perang memperebutkan perhatian kita masih jauh dari selesai

    • Sepertinya ini membandingkan hal yang berbeda
      Popover adalah elemen mengambang yang menampilkan informasi kontekstual saat dibutuhkan
      Yang disebutkan itu sesuatu yang sama sekali berbeda
    • Saya paham maksudnya, tetapi sepertinya sebenarnya bukan hal yang bisa dibandingkan
      Popup menyebarkan jendela sampah ke sistem operasi dan, dalam kasus terburuk, mengganggu penggunaan komputer itu sendiri
      Dialog popover selesai begitu tab ditutup
      Popover gaya seperti ini cukup berguna untuk menampilkan informasi, dan sudah lama digunakan
      Memang bisa dipakai dengan menyebalkan, tetapi seperti modal, ada banyak use case nyata juga
    • Saya sering melihat reaksi seperti ini, tetapi agak tidak masuk akal
      Sekarang pun popover bisa diimplementasikan dengan div yang ada, dan sebagainya
      Contoh: https://getbootstrap.com/docs/5.3/components/popovers/
      Yang berubah adalah popover bisa diimplementasikan tanpa library tambahan yang seperti sulap
      Memblokir elemen “popover” yang eksplisit pun orang-orang hanya akan terus memakai library kustom
    • Ini bukan popup
      Orang membenci popup karena intrusif dan punya jendela terpisah
      API ini menggantikan modal div, sehingga mengurangi waktu dan kode developer
    • Implementasi popup pada dasarnya melanggar batas antara konten aplikasi dan sistem operasi, dan pemblokir popup dibuat untuk mencegah itu
      API ini tidak melanggar batas tersebut
      Jika batas itu dilanggar, kegunaan dan keamanan sistem menurun, jadi itu arah yang tidak diinginkan

  • Katanya “popover yang dibuat dengan Popover API selalu non-modal. Jika ingin membuat popover modal, elemen <dialog> adalah pilihan yang tepat”, tetapi saya tidak tahu kenapa begitu
    Ini adalah use case yang sah untuk popover
    Apalagi jika latar belakang dibuat blur saat terbuka; jika tombol yang diburamkan masih bisa tidak sengaja diklik pengguna, saya jadi bertanya-tanya kenapa fitur itu disediakan
    Setelah dicari, ternyata keduanya bisa digabungkan
    Kurang lebih “jika ingin menggabungkan kontrol popover dan semantik dialog, elemen <dialog> bisa dijadikan popover”
    Kalau begitu, rasanya atribut seperti modal lebih masuk akal di sini
    Karena use case-nya jelas diakui

    • Mungkin salah satu dari beberapa alasannya adalah karena <dialog> sudah ada jauh lebih dulu

  • Sangat bagus
    Kalau saya memahaminya dengan benar, ini bukan memperkenalkan fitur baru, melainkan menyederhanakan bagian yang sebelumnya membutuhkan modal div, mask div, container div, dan CSS positioning yang merepotkan
    Pseudo-class yang memudahkan styling juga ditambahkan, saya suka

    • Ini juga membuat fitur dasar bisa dipakai tanpa JavaScript
      Tidak perlu memaksa memakai checkbox tersembunyi
      Saya tidak tahu sejauh apa popover dengan styling dan animasi bisa berjalan tanpa JS, tetapi dukungan tanpa JS dengan penanganan fokus yang benar itu bagus
      Saya ingin mengatakan dukungan aksesibilitas juga sudah bawaan, tetapi saya tidak bisa menemukannya di spesifikasi saat ini
      Jika sampai menangani pemberitahuan elemen ke alat aksesibilitas seperti screen reader, itu akan sangat membantu
      Karena saat melakukannya manual, hal seperti itu cukup mudah terlewat
    • API ini memungkinkan pengendalian status tampilan elemen popover di DOM bahkan tanpa JavaScript
      Jelas berguna

  • Demo: https://mdn.github.io/dom-examples/popover-api

    • Dalam demo popover bersarang, tidak bisa bergerak diagonal dari Pizza ke Ham
      Karena belum ada yang mengimplementasikan delay sebelum submenu menghilang di Chrome maupun Firefox
      Puluhan tahun riset pengalaman pengguna hilang, dan itu hampir sesuai dugaan
      https://mdn.github.io/dom-examples/popover-api/nested-popove...
    • Menurut tabel dukungan browser, seharusnya bisa, tetapi tampaknya tidak berfungsi di iOS Safari

  • Terlihat keren, tetapi saya tidak mengerti kenapa halaman ini sama sekali tidak punya gambar yang menunjukkan apa itu popover

  • Luar biasa
    Implementasi kustom yang dibuat dengan Stimulus menggunakan Popper ada di sini
    https://github.com/tramlinehq/tramline/blob/main/app/javascr...
    Dan implementasi untuk dialog ada di sini
    https://github.com/tramlinehq/tramline/blob/main/app/javascr...