Popover dan dialog

Popover adalah elemen apa pun dengan atribut popover, dan berguna untuk berbagai pola interaktif, termasuk tooltip, pemberitahuan, toast, dan lainnya.

<div id="my-popover" popover>My popover content</div>

Atribut popover menyembunyikan elemen secara default, dan Anda harus menyediakan cara bagi pengguna untuk membukanya. Meskipun ditempatkan di lapisan teratas, di atas semua konten lainnya, popover tidak bersifat modal. Artinya, Anda tetap dapat berinteraksi dengan konten di luar popover.

Mengontrol popover

Sebelum kita mempelajari berbagai jenis popover dan perilakunya, lihat cara membuka dan menutup popover Anda.

Secara deklaratif

Popover dapat dikontrol sepenuhnya di HTML, tanpa perlu menggunakan JavaScript, menggunakan tombol (dan input dengan jenis button) dan atribut popovertarget.

Popover dalam cuplikan kode sebelumnya memiliki id my-popover, dan Anda dapat menggunakannya untuk merujuk ke popover.

<button popovertarget="my-popover">Toggle</button>

Anda juga dapat menentukan apakah tombol harus membuka atau menutup popover menggunakan popovertargetaction="show" dan popovertargetaction="hide".

Dengan JavaScript

Anda juga dapat mengontrol popover menggunakan JavaScript, yang berguna saat Anda ingin menampilkan popover sebagai respons terhadap sesuatu selain klik tombol pengguna. Untuk melakukannya, Anda harus mendapatkan elemen popover, lalu memanggil showPopover(), hidePopover(), atau togglePopover().

Jenis popover

Saat Anda menambahkan popover ke situs, ada banyak interaksi yang perlu dipertimbangkan. Bagaimana cara membukanya? Bagaimana cara pengguna menutupnya? Apa yang terjadi pada popover terbuka lainnya? Ada tiga jenis popover, dan Anda dapat memilih jenis yang memberikan perilaku dan interaksi yang diperlukan oleh kasus penggunaan Anda.

Pop-over otomatis

Popover otomatis memiliki fungsi bawaan terbanyak, dan merupakan default jika Anda tidak menentukan jenis.

<div id="popover" popover>My popover</div>

Dalam banyak kasus, Anda tidak ingin membuka beberapa popover secara bersamaan, sehingga popover otomatis menutup popover otomatis lainnya saat dibuka. Popover juga mendukung "penutupan ringan", yang berarti jika Anda mengklik di luar popover, popover akan ditutup secara otomatis. Dialog ini juga dapat ditutup dengan tombol Esc.

Popover manual

Meskipun perilaku popover otomatis mencakup banyak kasus penggunaan, ada kasus saat Anda mungkin memerlukan lebih banyak kontrol atas popover. Dengan popover manual, Anda memiliki lebih banyak kontrol, dan juga bertanggung jawab atas lebih banyak perilaku.

<div id="popover" popover="manual">My popover</div>

Popover ini hanya akan ditutup jika Anda menutupnya secara eksplisit–popover ini tidak dapat ditutup dengan penutupan ringan atau tombol Esc. Anda dapat membuka beberapa popover secara bersamaan.

Popover petunjuk

Anda juga dapat menggunakan popover untuk menambahkan tooltip ke halaman Anda. Dalam pola ini, Anda ingin dapat mengarahkan kursor ke item, dan melihat deskripsi. Hanya satu yang boleh dibuka dalam satu waktu. Jika Anda menggunakan popover otomatis, membuka satu popover akan menutup popover otomatis lain yang terbuka. Jika menggunakan popover manual, Anda harus menerapkan banyak perilaku secara manual, termasuk menutup popover lain. Pop-over petunjuk memberikan opsi ketiga dengan perilaku yang mirip dengan pop-over otomatis. Namun, membuka popover saran tidak menutup popover otomatis.

<div id="popover" popover="hint">My popover</div>

Popover petunjuk berguna untuk informasi tambahan yang bersifat sekunder terhadap konten utama. Anda sering kali ingin memicu popover saran dengan peristiwa non-klik seperti mengarahkan kursor atau fokus.

Memosisikan popover

Secara default, popover Anda akan terbuka di tengah layar. Elemen ini ditambahkan ke lapisan atas, di atas semua konten Anda yang lain, dan dapat diposisikan relatif terhadap area pandang.

Hal ini tidak selalu ideal, karena Anda sering kali ingin menempatkan popover di dekat item yang memicunya. Pemosisian anchor menyediakan cara untuk melakukannya.

Ada dua langkah untuk penentuan posisi anchor, yaitu menentukan elemen anchor dan menempatkan elemen relatif terhadap anchor tersebut. Popover dapat menangani langkah pertama, dengan menetapkan anchor implisit untuk Anda. Saat Anda membuka popover menggunakan <button popovertarget>, tombol adalah anchor implisit. Jika Anda membuka popover menggunakan JavaScript, Anda dapat menyetel anchor implisit dengan opsi source.

Secara default, popover dipusatkan menggunakan margin: auto. Untuk menggunakan penempatan anchor, Anda mungkin perlu menggantinya dengan menyetel margin: unset.

Gaya dan animasi

Elemen pseudo ::backdrop

Pop-over terbuka di lapisan atas, di atas semua konten lain di halaman Anda. Di bawah popover terdapat elemen semu ::backdrop yang dapat diberi gaya.

Penting untuk diperhatikan bahwa konten di luar popover tidak pasif. Anda tetap dapat mengklik tombol dan menggunakan keyboard untuk menjelajahi halaman. Anda tidak boleh mengaburkan konten halaman, misalnya, dengan menerapkan efek buram berat atau menyetel latar belakang ke warna buram.

Class semu :popover-open

Misalnya, Anda ingin menata konten popover menggunakan Petak CSS. Anda menambahkan [popover]{ display: grid }, dan tiba-tiba semua popover Anda terlihat. Hal ini karena popover disembunyikan menggunakan display: none. Anda dapat menggunakan class semu :popover-open untuk menerapkan gaya hanya saat popover terbuka.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open juga berguna saat Anda menganimasikan popover.

Menganimasikan popover

Ada 3 langkah dalam animasi popover:

1. @starting-style {popover:popover-open { } }-Gaya awal untuk popover segera setelah terlihat. Perhatikan bahwa hal ini harus ditentukan dalam stylesheet Anda setelah #2.
2. popover:popover-open { }-Gaya untuk popover saat terbuka.
3. popover { }-Gaya yang digunakan popover saat ditutup.

Popover disembunyikan menggunakan display: none saat tidak terbuka. Untuk menganimasikannya, Anda harus menetapkan transition-behavior: allow-discrete, dan juga menambahkan display ke daftar properti di transition.

Jika Anda memosisikan popover dengan anchor implisit, Anda juga perlu menambahkan overlay dalam daftar properti di transition. Hubungan penahan implisit dihapus setelah popover dihapus dari lapisan atas, sehingga menambahkan transisi ke properti overlay menunda hal tersebut hingga transisi keluar selesai.

Interaksi antara popover

Anda mungkin memiliki beberapa popover di halaman, dan cara interaksinya bergantung pada jenis dan cara penggunaannya.

Popover bertingkat

Dalam beberapa kasus, Anda mungkin perlu membuka popover dari dalam popover lain. Misalnya, Anda mungkin memiliki menu popover, dan salah satu item menu membuka submenu. Saat pengguna menutup menu utama, Anda tidak ingin submenu tetap terbuka. Pop-up dapat membantu menanganinya secara otomatis.

Jika Anda membuka popover petunjuk dari popover petunjuk, atau popover otomatis dari popover otomatis, popover akan dimasukkan ke dalam stack. Menutup popover juga akan menutup semua popover setelahnya dalam tumpukan. Hal ini juga berfungsi dengan penutupan ringan—jika Anda mengklik popover, semua popover setelahnya dalam stack akan ditutup, tetapi popover sebelumnya akan tetap terbuka.

Popover ditambahkan ke stack jika elemen sumbernya berada di dalam popover. Elemen sumber ditetapkan secara otomatis saat Anda menggunakan popovertarget pada tombol, atau dengan JavaScript dengan menetapkan opsi source saat memanggil .showPopover({source}) atau .togglePopover({source}).

Ada stack untuk popover otomatis, dan stack terpisah untuk popover petunjuk. Namun, jika Anda membuka popover petunjuk dari dalam popover otomatis, popover tersebut akan ditambahkan ke stack otomatis.

Ingatlah bahwa popover saran ditujukan untuk informasi sementara yang lebih sederhana, sehingga Anda tidak dapat memicu popover otomatis dari popover saran.

Jika Anda menggunakan popover manual, Anda harus mengelola semuanya secara manual.

Menutup jenis popover lainnya

Anda telah mempelajari bahwa membuka popover otomatis akan menutup popover otomatis lainnya, tetapi bagaimana interaksi berbagai jenis popover? Pelajari hal ini dengan contoh halaman yang menggunakan ketiga jenis tersebut. Ada menu navigasi dengan tombol yang menggunakan popover otomatis untuk membuka dan menutup. Ada teks di halaman yang menggunakan popover petunjuk untuk menampilkan tooltip kontekstual. Terakhir, ada toast dengan popover manual untuk memberi tahu pengguna bahwa tugas latar belakang telah selesai.

Tips alat bersifat sementara, dan muncul saat kita mengarahkan kursor ke teks. Kami hanya mengharapkan satu tooltip terlihat dalam satu waktu, dan memicu popover petunjuk kedua akan menutup yang pertama.

Saat Anda membuka menu dengan mengklik tombol, petunjuk akan ditutup karena dua alasan. Pertama, klik di luar saran akan memicu penutupan ringan. Kedua, membuka popover otomatis akan menutup semua popover saran yang terbuka. Hal ini karena pengguna telah mengubah fokusnya, dan konten sementara dalam popover petunjuk tidak lagi relevan. Artinya, jika Anda memanggil showPopover() pada popover otomatis, popover petunjuk yang terbuka akan ditutup.

Menu drop-down adalah popover otomatis. Dengan menu drop-down, Anda hanya mengharapkan satu menu terbuka dalam satu waktu, dan membuka satu menu akan menutup menu lainnya. Seperti yang Anda lihat, membuka popover otomatis juga akan menutup popover petunjuk yang terbuka.

Namun, saat menu drop-down terbuka, Anda mungkin masih ingin melihat konten tooltip yang tidak terkait. Menampilkan tooltip petunjuk tidak menutup popover otomatis.

Popover manual tidak terpengaruh oleh popover otomatis atau petunjuk, dan saat terbuka, popover ini tidak menutup popover otomatis atau petunjuk. Namun, jika Anda membuka popover manual dengan mengklik tombol, hal ini akan memicu penutupan ringan pada popover otomatis dan petunjuk.

Interaksi antara jenis popover mungkin tampak rumit, tetapi memungkinkan pola penggunaan umum jika Anda menggunakan jenis tersebut dalam situasi yang tepat. Jika popover Anda tidak berinteraksi seperti yang diharapkan, tinjau kembali jenis yang Anda gunakan.

Periksa pemahaman Anda