Tooltip, menu bantuan, dan kartu detail produk memakai pola yang sama: elemen kecil yang muncul di atas konten. Membangunnya sendiri selalu bertemu dua persoalan: urutan z-index yang tidak kunjung selesai dan penutupan saat pengguna mengeklik area luar. Popover API menyelesaikan keduanya: elemen naik ke top layer secara otomatis, dan penutupannya ditangani browser. API ini mencapai Baseline pada 2024 (Chrome 114, Edge 114, Firefox 125, Safari 17).

Chapter ini membahas atribut popover, tombol popovertarget tanpa JavaScript, dan bedanya dengan dialog modal.

Atribut popover #

Aturannya: atribut popover menandai elemen sebagai popover. Nilai bawaannya popover="auto", jadi atribut polos popover sudah berarti popover="auto". Elemen ber-atribut popover tersembunyi bawaannya dan hanya tampil lewat API ini.

Mekanismenya: ketika popover ditampilkan, browser memindahkannya ke top layer — lapisan perenderan di atas seluruh konten halaman. Tidak perlu lagi z-index besar maupun position: fixed — apa pun di halaman tidak menutupi popover.

popovertarget: Tombol Tanpa JavaScript #

Hubungan pembuka dijalin lewat tombol: button dengan atribut popovertarget="idPopover" terhubung ke elemen ber-id tersebut — menekannya menampilkan atau menyembunyikan popover otomatis, tanpa JavaScript. Atribut popovertargetaction mengatur arahnya: "show", "hide", atau "toggle" (bawaan).

html 
<button type="button" popovertarget="menuBantuan">Bantuan</button>

<div id="menuBantuan" popover>
  <p>Pilih menu, tekan tombol Tambah, lalu buka keranjang untuk menyelesaikan pesanan.</p>
</div>

Mari kita telaah kode di atas:

  1. Baris 1 (popovertarget="menuBantuan"): tombol terhubung ke popover ber-id="menuBantuan"; tanpa popovertargetaction, aksinya "toggle" — tekan membuka, tekan lagi menutup.
  2. Baris 3 (popover): menandai div sebagai popover "auto" — tersembunyi bawaannya, naik ke top layer saat dibuka.
  3. Baris 3 (id="menuBantuan"): penghubung yang dirujuk tombol.

Nilai auto dan manual #

Dua nilai popover memberi dua karakter penutupan:

Aspekpopover="auto"popover="manual"
Tombol Escmenutup popovertidak berefek
Klik di luar (light dismiss)menutup popovertidak menutup
Menutup popover lainya, popover auto lain ikut tertutuptidak
Cocok untukmenu, tooltip, bantuankonten yang harus tetap tampil

Nilai auto tepat untuk hampir semua kebutuhan; manual untuk popover yang hanya boleh ditutup lewat kontrolnya, misalnya kartu panduan yang sengaja dibiarkan tampil.

Popover vs Dialog Modal #

Keduanya sama-sama memakai top layer, tetapi tujuannya berbeda. Dialog modal memblokir interaksi halaman — pengguna wajib menyelesaikan dialog lebih dulu. Popover tidak memblokir apa pun: pengguna tetap dapat mengeklik dan menggulir, dan popover auto tertutup sendiri saat perhatian berpindah. Aturan praktisnya: butuh jawaban paksa, pakai dialog dengan showModal(); butuh informasi melayang, pakai popover.

Mencoba Menu Bantuan Tanpa JavaScript #

Demo berikut tanpa script sama sekali. Tekan tombolnya untuk membuka menu, lalu coba: tekan Esc saat popover terbuka, dan klik area kosong di sekitarnya:

Perilaku auto bekerja penuh di demo: Esc menutup, klik di luar menutup (light dismiss), dan membuka popover menutup popover auto lain — semuanya dari atribut semata.

Ringkasan #

  • Atribut popover (bawaan "auto") menyembunyikan elemen dan menaikkannya ke top layer saat dibuka — tanpa z-index.
  • Tombol dengan popovertarget="id" membuka dan menutup popover tanpa JavaScript; popovertargetaction mengatur show, hide, atau toggle.
  • Popover auto tertutup lewat Esc dan light dismiss; popover manual hanya lewat kontrolnya.
  • Popover tidak memblokir interaksi halaman — perbedaan utamanya dengan dialog modal. Baseline 2024: Chrome 114, Edge 114, Firefox 125, Safari 17.

Chapter berikutnya berpindah dari interaksi ke pelaporan keadaan: elemen progress untuk menampilkan kemajuan tugas.