Tooltips kaya masalah UI paling cilik sing sampeyan duwe. Dheweke cilik lan biasane didhelikake. Nalika wong takon carane mbangun siji, jawaban tradisional meh tansah bali nggunakake sawetara perpustakaan JavaScript. Lan kanggo dangu, sing saran wicaksana. Aku uga ngetutake. Ing lumahing, tooltip prasaja. Kisaran utawa fokus ing unsur, nuduhake kothak cilik karo sawetara teks, banjur ndhelikake nalika pangguna pindhah adoh. Nanging yen sampeyan ngirim siji menyang pangguna nyata, pinggiran bakal katon. Pangguna keyboard Tab menyang pemicu, nanging ora tau ndeleng tooltip. Pembaca layar ngumumake kaping pindho, utawa ora kabeh. Tooltip kerlip yen sampeyan mindhah mouse cepet banget. Iku tumpang tindih isi ing layar cilik. Pencet Esc ora nutup. Fokus ilang. Suwe-suwe, kode tooltip saya tambah dadi barang sing ora dakkarepake maneh. Pendengar acara tumpuk-tumpuk. Hover lan fokus kudu ditangani kanthi kapisah. Klik njaba mbutuhake kasus khusus. Atribut ARIA kudu diselarasake kanthi tangan. Saben fix cilik nambahake lapisan logika liyane. Pustaka mbantu, nanging padha uga luwih kaya kothak ireng aku kerjo watara tinimbang kebak ngerti apa iki kedados konco sing pemandangan. Iki sing nyurung aku kanggo ndeleng Popover API sing luwih anyar. Aku pengin ndeleng apa sing bakal kelakon yen aku mbangun tooltip siji nggunakake model native browser tanpa bantuan saka perpustakaan. Nalika kita miwiti, iku worth kang lagi nyimak sing, kaya karo fitur anyar, ana sawetara bab sing isih disetrika metu. Sing jarene, saiki seneng dhukungan browser sing apik, sanajan ana sawetara potongan ing API sakabèhé sing ana ing flux. Iku worth tetep mripat ing Caniuse ing sauntara iku. Tooltip "Lawas". Sadurunge Popover API, nggunakake perpustakaan tooltip dudu trabasan. Iku standar. Browser ora duwe konsep asli saka tooltip sing bisa digunakake ing mouse, keyboard, lan teknologi bantu. Yen sampeyan peduli babagan kabeneran, mung pilihan sampeyan yaiku nggunakake perpustakaan, lan aku pancene nindakake. Ing tingkat dhuwur, pola tansah padha: unsur pemicu, unsur tooltip didhelikake, lan JavaScript kanggo koordinasi loro.
Pustaka ditangani kabel sing ngidini unsur kanggo nuduhake ing hover utawa fokus, ndhelikake ing blur utawa ninggalake mouse, lan reposition / ngowahi ukuran ing gulung.
Swara wektu, tooltip bisa dadi rapuh. Owah-owahan cilik nggawa risiko. Perbaikan cilik nyebabake regresi. Luwih elek, nambah tooltips anyar diwenehi kerumitan sing padha. Prekara-prekara kanthi teknis, nanging ora nate dirasakake utawa rampung. Iki minangka kahanan nalika aku mutusake kanggo mbangun tooltip nggunakake API Popover asli browser. Wayahe Aku Nyoba The Popover API Aku ora ngalih menyang nggunakake Popover API amarga aku wanted kanggo eksprimen karo soko anyar. Aku ngalih amarga aku kesel kanggo njaga prilaku tooltip sing aku pracaya browser kudu wis ngerti. Aku mamang ing wiwitan. Umume API web anyar njanjeni kesederhanaan, nanging isih mbutuhake lem, penanganan kasus pinggir, utawa logika mundur sing kanthi tenang nggawe kerumitan sing padha sing sampeyan coba uwal. Dadi, aku nyoba Popover API kanthi cara sing paling cilik. Iki sing katon kaya:
1. Keyboard "Mung Bisa" Dhukungan keyboard gumantung ing pirang-pirang lapisan sing disusun kanthi bener: fokus kudu micu tooltip, blur kudu ndhelikake, Esc kudu nganggo kabel kanthi manual, lan wektu sing penting. Yen sampeyan ora kejawab siji cilik pinggiran, tooltip bakal tetep mbukak dawa banget utawa ilang sadurunge bisa diwaca. Kanthi atribut popover disetel menyang otomatis utawa manual, browser njupuk dhasar: Tab lan Shift+Tab tumindak normal, Esc nutup tooltip saben wektu, lan ora ana pamireng tambahan sing dibutuhake.
Sing ilang saka basis kodeku yaiku panangan keydown global, logika pembersihan khusus Esc, lan mriksa negara sajrone navigasi keyboard. Pengalaman keyboard mandheg dadi aku kudu njaga, lan dadi jaminan browser. 2. Screenreader Predictability Iki ana ingdandan paling gedhe. Malah kanthi karya ARIA sing ati-ati, prilaku kasebut beda-beda, kaya sing dakkandhakake sadurunge. Saben owah-owahan cilik felt beboyo. Nggunakake popover kanthi peran sing tepat katon lan rumangsa luwih stabil lan bisa diprediksi babagan apa sing bakal kelakon:
Lan iki menang liyane: Sawise ngalih, Mercusuar mandheg menehi tandha peringatan negara ARIA sing salah kanggo interaksi kasebut, umume amarga ora ana maneh negara ARIA khusus supaya aku ora sengaja salah.
3. Manajemen Fokus Fokus biyen rapuh. Sadurunge, aku duwe aturan kaya: supaya pemicu fokus nuduhake tooltip, pindhah fokus menyang tooltip lan aja nutup, blur pemicu nalika cedhak banget, lan nutup tooltip lan mulihake fokus kanthi manual. Iki makarya nganti ora. Kanthi API Popover, browser ngetrapake model sing luwih prasaja ing ngendi fokus bisa luwih alami pindhah menyang popover. Nutup popover ngasilake fokus menyang pemicu, lan ora ana jebakan fokus sing ora katon utawa ilang wektu fokus. Lan aku ora nambah kode pemugaran fokus; Aku dibusak.
Kesimpulan Popover API tegese tooltips ora ana maneh soko sampeyan simulasi. Iku soko browser mangertos. Mbukak, nutup, prilaku keyboard, nangani uwal, lan potongan gedhe saka aksesibilitas saiki teka saka platform dhewe, ora saka ad-hoc JavaScript. Iki ora ateges perpustakaan tooltip wis lungse amarga isih ana gunane kanggo sistem desain sing rumit, kustomisasi abot, utawa kendala warisan, nanging standar kasebut wis owah. Kanggo pisanan, tooltip sing paling gampang uga bisa dadi sing paling bener. Yen sampeyan kepengin weruh, coba eksperimen iki: Cukup ngganti mung siji tooltip ing produk sampeyan karo Popover API, aja nulis ulang kabeh, aja migrasi kabeh sistem, lan pilih siji lan deleng apa sing ilang saka kode sampeyan. Nalika platform menehi primitif sing luwih apik, menang ora mung luwih sithik baris JavaScript, nanging luwih sithik sampeyan kudu kuwatir. Priksa kode sumber lengkap ing repo GitHub. Wacan Salajengipun Kanggo nyilem luwih jero menyang popovers lan API sing gegandhengan:
"Poppin 'In", Geoff Graham "Njlentrehake Hubungan Antarane Popovers lan Dialog", Zell Liew "Apa popover = pitunjuk?", Una Kravets "Perintah Invoker", Daniel Schwarz "Nggawe Notifikasi Auto-Closing karo HTML Popover", Preethi Bukak UI Popover API Explainer "Pop (liwat) Balon", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN uga nawakake dokumentasi teknis lengkap kanggo Popover API.
