Popover API tersedia di Dasar Pengukuran

Una Kravets

Bersiaplah! Salah satu fitur yang paling saya nantikan baru saja hadir di semua browser modern dan secara resmi menjadi bagian dari Baseline 2024. Dan fitur ini adalah Popover API. Popover menyediakan banyak primitive dan kemampuan developer yang luar biasa untuk membuat antarmuka berlapis seperti tooltip, menu, UI pengajaran, dan lainnya.

Beberapa sorotan singkat tentang kemampuan popover meliputi:

• Promosi ke lapisan atas. Popover akan muncul di lapisan atas di atas bagian halaman lainnya, sehingga Anda tidak perlu bermain-main dengan z-index.
• Fungsi tutup ringan. Mengklik di luar area popover akan menutup popover dan mengembalikan fokus.
• Pengelolaan fokus default. Membuka popover akan membuat tab berikutnya berhenti di dalam popover.
• Binding keyboard yang mudah diakses. Menekan tombol esc atau mengalihkan dua kali akan menutup popover dan mengembalikan fokus.
• Binding komponen yang dapat diakses. Menghubungkan elemen popover ke pemicu popover secara semantik.

Membuat popover

Membuat popover cukup mudah. Untuk menggunakan nilai default, Anda hanya memerlukan button untuk memicu popover, dan elemen untuk dipicu.

• Pertama, tetapkan atribut popover pada elemen yang akan menjadi popover.
• Kemudian, tambahkan id unik pada elemen popover.
• Terakhir, untuk menghubungkan tombol ke popover, tetapkan popovertarget tombol ke nilai id elemen popover.

Hal ini ditunjukkan dalam kode berikut:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Untuk memiliki kontrol yang lebih terperinci atas popover, Anda dapat menetapkan jenis popover secara eksplisit. Misalnya, menggunakan atribut popover tanpa nilai sama dengan popover="auto". Nilai auto mengaktifkan perilaku penutupan ringan dan otomatis menutup popover lainnya. Gunakan popover="manual" dan Anda harus menambahkan tombol tutup, popover manual tidak menutup popover lain atau memungkinkan pengguna menutup popover dengan mengklik di UI. Anda membuat popover manual menggunakan hal berikut:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Popover versus dialog modal

Anda mungkin bertanya-tanya apakah Anda memerlukan pop-up saat dialog ada, dan jawabannya adalah: Anda mungkin tidak.

Perlu diperhatikan bahwa atribut popover tidak memberikan semantik dengan sendirinya. Meskipun Anda kini dapat membuat pengalaman seperti dialog modal menggunakan popover, ada beberapa perbedaan utama antara keduanya:

Kesimpulan dan bacaan lebih lanjut

Ada banyak fitur menarik yang dibawa popover ke platform. Untuk mempelajari API ini lebih lanjut, termasuk lebih lanjut tentang aksesibilitas fitur, dan dokumentasi terkait kumpulan fitur, berikut beberapa bacaan yang direkomendasikan untuk informasi lebih lanjut:

• Semantik dan atribut pop-up: apa yang harus digunakan dan kapan? oleh Hidde de Vries
• Tentang aksesibilitas pop-up: apa yang dilakukan dan tidak dilakukan browser oleh Hidde de Vries
• Dokumentasi MDN tentang popover