Popover API
Buat tooltip dan dialog dengan atribut popover bawaan.
Popover API adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Fungsi API Popover
API Popover memberi HTML cara bawaan untuk membuat popover, dialog, keterangan alat, dan menu—tanpa JavaScript manual untuk penempatan, pengelolaan fokus, penutupan saat klik di luar, atau penutupan dengan tombol Esc. Perilaku bawaan ini sesuai dengan harapan pengguna.
Atribut popover
Tambahkan popover ke elemen apa pun untuk menjadikannya popover. Elemen ini tersembunyi secara bawaan. Tombol pemicu dengan popovertarget="popover-id" menampilkannya saat diklik. Peramban menangani status buka dan tutup secara otomatis.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Mode Popover
popover="auto" (bawaan)—menutup secara otomatis saat diklik di luar atau saat menekan Escape; hanya satu popover otomatis yang dapat terbuka pada satu waktu. popover="manual"—tidak menutup secara otomatis; harus ditutup secara eksplisit melalui JS atau pemicu lain.
Tombol Pemicu
Atribut popovertarget menghubungkan tombol ke popover berdasarkan id. Peramban menangani perilaku pengalihannya: klik tombol untuk menampilkan, lalu klik lagi atau klik di luar untuk menutupnya. Tidak diperlukan penangan peristiwa untuk penggunaan dasar.
Perenderan Lapisan Teratas
Popover dirender di lapisan teratas—di atas semua konten lain, terlepas dari z-index atau konteks penumpukan. Ini menghilangkan kesalahan klasik “modal tersembunyi di balik induk overflow:hidden” yang sering menimpa popover buatan sendiri.
Menampilkan dan Menyembunyikan Secara Terprogram
JavaScript dapat menampilkan atau menyembunyikan popover: element.showPopover(), element.hidePopover(), element.togglePopover(). Semantiknya sama seperti pemicu deklaratif—penutupan saat klik di luar tetap berfungsi untuk mode otomatis.
Peristiwa toggle
Popover memicu peristiwa toggle saat statusnya berubah. newState pada peristiwa tersebut adalah "open" atau "closed". Ini berguna untuk analitik, pengelolaan fokus, atau menyelaraskan antarmuka pengguna lain dengan status terbuka popover.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});Pseudokelas CSS
Pseudokelas :popover-open cocok dengan popover dalam status terbuka. Atur transisi, opasitas, dan transformasi gaya berdasarkan status ini: [popover]:popover-open { opacity: 1; transform: none; }.
Penempatan Jangkar
Jika digabungkan dengan API Penempatan Jangkar CSS, popover dapat ditempatkan relatif terhadap pemicunya secara otomatis—tidak diperlukan JavaScript untuk pola klasik “keterangan alat di dekat tombol”. Kedua fitur ini merupakan bagian dari upaya yang sama untuk menyediakan primitif antarmuka pengguna modern.
Aksesibilitas
Peramban menangani pengurungan fokus untuk popover modal, mengembalikan fokus ke pemicu saat ditutup, dan mengumumkan status terbuka popover kepada pembaca layar. Membangun semua ini secara manual memerlukan banyak kode ARIA; API Popover menyediakannya secara bawaan.
Dukungan Peramban
Chrome dan Safari mendukung API Popover; Firefox menambahkan dukungan lebih baru. Untuk kompatibilitas yang lebih luas, tersedia polyfill kecil. Proyek baru dapat menggunakan fitur bawaan dan menyediakan peningkatan bertahap untuk peramban lama.
Menggantikan Pola Lama
Banyak pustaka modal JavaScript (sweetalert, react-modal) terutama ada untuk mengatasi hal-hal yang kini ditangani secara bawaan oleh API Popover. Rencanakan migrasi: bundel lebih kecil, bawaan yang lebih baik, dan lebih sedikit kode untuk dipelihara. API Popover adalah salah satu peningkatan terbesar pada HTML selama bertahun-tahun.
Pemeriksaan Pengetahuan
Apa yang dilakukan popover="auto" tetapi tidak dilakukan popover="manual"?
Ringkasan
API Popover menambahkan atribut popover beserta JS showPopover/hidePopover/togglePopover, penghubungan pemicu melalui popovertarget, perenderan di lapisan teratas di atas semua konteks penumpukan, pseudokelas :popover-open, dan peristiwa toggle. Mode otomatis menutup saat klik di luar; mode manual memerlukan tindakan eksplisit. API ini menggantikan sebagian besar pustaka modal dan keterangan alat khusus dengan satu primitif HTML yang menangani aksesibilitas, fokus, dan z-index dengan benar.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Popover API” gratis?
Ya — teks lengkap “Popover API” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Popover API”?
Buat tooltip dan dialog dengan atribut popover bawaan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Popover API” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.