Tooltip terasa seperti masalah UI terkecil yang bisa Anda alami. Mereka kecil dan biasanya tersembunyi. Ketika seseorang bertanya bagaimana cara membuatnya, jawaban tradisional hampir selalu muncul menggunakan beberapa perpustakaan JavaScript. Dan untuk waktu yang lama, itulah nasihat yang masuk akal. Aku juga mengikutinya. Di permukaan, tooltip itu sederhana. Arahkan atau fokuskan pada suatu elemen, tampilkan kotak kecil dengan beberapa teks, lalu sembunyikan ketika pengguna menjauh. Namun begitu Anda mengirimkannya ke pengguna sebenarnya, ujung-ujungnya mulai terlihat. Pengguna keyboard Tab ke dalam pemicu, tetapi tidak pernah melihat tooltip. Pembaca layar mengumumkannya dua kali, atau tidak sama sekali. Tooltip berkedip ketika Anda menggerakkan mouse terlalu cepat. Ini tumpang tindih dengan konten di layar yang lebih kecil. Menekan Esc tidak akan menutupnya. Fokus hilang. Seiring waktu, kode tooltip saya berkembang menjadi sesuatu yang tidak ingin saya miliki lagi. Pendengar acara menumpuk. Arahkan kursor dan fokus harus ditangani secara terpisah. Klik luar memerlukan kasus khusus. Atribut ARIA harus tetap sinkron dengan tangan. Setiap perbaikan kecil menambahkan lapisan logika lainnya. Perpustakaan membantu, namun perpustakaan juga lebih seperti kotak hitam yang saya kerjakan alih-alih memahami sepenuhnya apa yang terjadi di balik layar. Itulah yang mendorong saya untuk melihat Popover API yang lebih baru. Saya ingin melihat apa yang akan terjadi jika saya membuat ulang satu tooltip menggunakan model asli browser tanpa bantuan perpustakaan. Saat kita memulai, perlu diperhatikan bahwa, seperti halnya fitur baru lainnya, ada beberapa hal yang masih diperbaiki. Meskipun demikian, saat ini ia menikmati dukungan browser yang luar biasa, meskipun ada beberapa bagian pada keseluruhan API yang terus berubah. Sementara itu, ada baiknya mengawasi Caniuse. Keterangan Alat "Lama". Sebelum Popover API, menggunakan pustaka tooltip bukanlah jalan pintas. Itu adalah standarnya. Browser tidak memiliki konsep asli tentang tooltip yang berfungsi pada mouse, keyboard, dan teknologi bantu. Jika Anda peduli dengan kebenaran, satu-satunya pilihan Anda adalah menggunakan perpustakaan, dan itulah yang saya lakukan. Pada tingkat tinggi, polanya selalu sama: elemen pemicu, elemen tooltip tersembunyi, dan JavaScript untuk mengoordinasikan keduanya.
Pustaka menangani pengkabelan yang memungkinkan elemen ditampilkan saat mengarahkan kursor atau fokus, bersembunyi saat buram atau dibiarkan mouse, dan mengubah posisi/mengubah ukuran saat menggulir.
Seiring waktu, tooltip bisa menjadi rapuh. Perubahan kecil membawa risiko. Perbaikan kecil menyebabkan regresi. Lebih buruk lagi, menambahkan tooltips baru memiliki kompleksitas yang sama. Segala sesuatunya secara teknis berhasil, tetapi tidak pernah terasa selesai atau lengkap. Itulah keadaan ketika saya memutuskan untuk membangun kembali tooltip menggunakan API Popover asli browser. Saat Saya Mencoba API Popover Saya tidak beralih menggunakan Popover API karena saya ingin bereksperimen dengan sesuatu yang baru. Saya beralih karena saya lelah mempertahankan perilaku tooltip yang menurut saya seharusnya sudah dipahami oleh browser. Saya skeptis pada awalnya. Sebagian besar API web baru menjanjikan kesederhanaan, namun masih memerlukan lem, penanganan kasus tepi, atau logika fallback yang secara diam-diam menciptakan kembali kompleksitas yang sama yang ingin Anda hindari. Jadi, saya mencoba Popover API dengan cara sekecil mungkin. Berikut tampilannya:
1. Keyboard “Hanya Berfungsi” Dukungan keyboard bergantung pada beberapa lapisan yang berbaris dengan benar: fokus harus memicu tooltip, blur harus menyembunyikannya, Esc harus ditransfer secara manual, dan pengaturan waktu menjadi penting. Jika Anda melewatkan satu kasus tepi, tooltip akan tetap terbuka terlalu lama atau hilang sebelum dapat dibaca. Dengan atribut popover disetel ke otomatis atau manual, browser mengambil alih dasar-dasarnya: Tab dan Shift+Tab berfungsi normal, Esc menutup tooltip setiap saat, dan tidak diperlukan pendengar tambahan.
Yang hilang dari basis kode saya adalah penangan keydown global, logika pembersihan khusus Esc, dan pemeriksaan status selama navigasi keyboard. Pengalaman keyboard tidak lagi menjadi sesuatu yang harus saya pertahankan, dan menjadi jaminan browser. 2. Prediktabilitas Pembaca Layar Ini adalahpeningkatan terbesar. Bahkan dengan kerja ARIA yang hati-hati, perilakunya bervariasi, seperti yang saya uraikan sebelumnya. Setiap perubahan kecil terasa berisiko. Menggunakan popover dengan peran yang tepat terlihat dan terasa jauh lebih stabil dan dapat diprediksi mengenai apa yang akan terjadi:
Dan inilah kemenangan lainnya: Setelah peralihan, Lighthouse berhenti menandai peringatan status ARIA yang salah untuk interaksi tersebut, terutama karena tidak ada lagi status ARIA khusus yang dapat membuat saya salah secara tidak sengaja.
3. Manajemen Fokus Fokus dulunya rapuh. Sebelumnya, saya memiliki aturan seperti: biarkan pemicu fokus menampilkan keterangan alat, pindahkan fokus ke keterangan alat dan jangan tutup, pemicu buram jika terlalu dekat, dan tutup keterangan alat dan pulihkan fokus secara manual. Ini berhasil sampai tidak berhasil. Dengan Popover API, browser menerapkan model yang lebih sederhana di mana fokus dapat berpindah secara alami ke popover. Menutup popover mengembalikan fokus ke pemicu, dan tidak ada jebakan fokus yang tidak terlihat atau momen kehilangan fokus. Dan saya tidak menambahkan kode restorasi fokus; Saya menghapusnya.
Kesimpulan Popover API berarti tooltip bukan lagi sesuatu yang Anda simulasikan. Itu adalah sesuatu yang dipahami oleh browser. Pembukaan, penutupan, perilaku keyboard, penanganan Escape, dan sebagian besar aksesibilitas kini berasal dari platform itu sendiri, bukan dari JavaScript ad-hoc. Hal ini tidak berarti pustaka tooltip sudah ketinggalan zaman karena masih dapat digunakan untuk sistem desain yang kompleks, penyesuaian yang berat, atau batasan lama, namun standarnya telah bergeser. Untuk pertama kalinya, tooltip yang paling sederhana juga bisa menjadi yang paling benar. Jika Anda penasaran, cobalah eksperimen ini: Cukup ganti satu tooltip saja di produk Anda dengan Popover API, jangan menulis ulang semuanya, jangan migrasi seluruh sistem, dan cukup pilih satu dan lihat apa yang hilang dari kode Anda. Ketika platform memberi Anda primitif yang lebih baik, keuntungannya bukan hanya lebih sedikit baris JavaScript, namun lebih sedikit hal yang perlu Anda khawatirkan sama sekali. Lihat kode sumber lengkap di repo GitHub saya. Bacaan Lebih Lanjut Untuk mempelajari lebih dalam tentang popover dan API terkait:
“Poppin 'Masuk”, Geoff Graham “Mengklarifikasi Hubungan Antara Popover dan Dialog”, Zell Liew “Apa itu popover=petunjuk?”, Una Kravets "Perintah Penyerang", Daniel Schwarz “Membuat Notifikasi Penutupan Otomatis dengan Popover HTML”, Preethi Buka Penjelasan UI Popover API “Lepaskan (atas) Balonnya”, John Rhea “Pemosisian Jangkar CSS”, Juan Diego Rodríguez
MDN juga menawarkan dokumentasi teknis yang komprehensif untuk Popover API.
