Tooltips te nka sɛ UI haw ketewaa bi a wubetumi anya. Wɔyɛ nketewa na mpɛn pii no wɔde asie. Sɛ obi bisa sɛnea wɔkyekye bi a, ɛkame ayɛ sɛ bere nyinaa mmuae a wɔde di dwuma wɔ amanne kwan so no san ba denam JavaScript nhomakorabea bi so. Na bere tenten no, na ɛno ne afotu a ntease wom. Me nso midii akyi. Sɛ yɛhwɛ a, adwinnade ho nyansahyɛ yɛ mmerɛw. Fa wo nsa to wo nsa anaa fa w’adwene si element bi so, kyerɛ adaka ketewa bi a nsɛm bi wom, afei fa sie bere a nea ɔde di dwuma no akɔ akyirikyiri no. Nanso sɛ wode biako kɔma wɔn a wɔde di dwuma ankasa pɛ a, anoano no fi ase da adi. Keyboard dwumadiefoɔ Tab kɔ trigger no mu, nanso nhunu adwinnadeɛ no da. Screen readers de to gua mprenu, anaasɛ ɛnyɛ koraa. Adwinnade no hyerɛn bere a wode mouse no kɔ ntɛmntɛm dodo no. Ɛka nneɛma a ɛwɔ screen nketewa so no bom. Sɛ wobɔ Esc a, ɛnto mu. Adwene a wɔde si biribi so no yera. Bere kɔɔ so no, me tooltip code no nyin bɛyɛɛ biribi a na mempɛ ankasa sɛ menya bio. Nhyiam no atiefo boaboaa wɔn ho ano. Ná ɛsɛ sɛ wodi hover ne focus ho dwuma wɔ ɔkwan soronko so. Ná abɔnten so kliki hia nsɛm titiriw. Ná ɛsɛ sɛ wɔde nsa ma ARIA su ahorow no yɛ pɛ. Nsiesiei ketewaa biara de ntease foforo kaa ho. Nhomakorabea ahorow boaa, nanso na ɛte sɛ nnaka tuntum a meyɛ ho adwuma sen sɛ mɛte nea ɛrekɔ so wɔ akyi no ase yiye nso. Ɛno ne nea ɛkaa me ma mehwɛɛ Popover API foforo no. Na mepɛ sɛ mehu nea ɛbɛba sɛ mesan kyekye adwinnade biako a mede browser’s native model di dwuma a nhomakorabea mmoa nka ho a. Bere a yɛrefi ase no, ɛfata sɛ yɛhyɛ no nsow sɛ, sɛnea ɛte wɔ ade foforo biara ho no, nneɛma bi wɔ hɔ a ɛka ho a wɔda so ara reyɛ dade. Ɛno akyi no, mprempren ɛwɔ browser mmoa kɛse, ɛwom sɛ asinasin pii wɔ API no nyinaa mu a ɛresakra de. Ɛfata sɛ wode w’ani si Caniuse so saa bere yi. Nnwinnade a “Dedaw” no Ansa na Popover API reba no, na tooltip nhomakorabea a wode bedi dwuma no nyɛ ɔkwan tiawa. Ná ɛyɛ nea wɔahyɛ da ayɛ. Na browsers nni adwene a ɛwɔ hɔ ankasa wɔ adwinnade ho nyansahyɛ a ɛyɛ adwuma wɔ mouse, keyboard, ne mfiridwuma a ɛboa so. Sɛ na wodwen nea ɛteɛ ho a, nea wubetumi afa so ara ne sɛ wode nhomakorabea bedi dwuma, na saa pɛpɛɛpɛ na meyɛe. Wɔ sorosoro no, na nhwɛso no yɛ ade koro bere nyinaa: trigger element, hidden tooltip element, ne JavaScript a ɛbɛma abien no ayɛ biako.
Nhomakorabea no dii wiring a ɛma element no tumi kyerɛ wɔ hover anaa focus, sie wɔ blur anaa mouse leave, na reposition/resize wɔ scroll so no ho dwuma.
Bere kɔ so no, adwinnade no betumi ayɛ mmerɛw. Nsakrae nketenkete de asiane ba. Nneɛma nketenkete a wosiesiee no maa wɔsan kɔ akyi. Nea enye koraa no, nnwinnade foforo a wɔde ka ho no nyaa nsɛnnennen koro no ara fii awo mu. Nneɛma yɛɛ adwuma wɔ mfiridwuma mu, nanso wɔante nka da sɛ wɔasiesie anaasɛ wɔawie. Saa na na nneɛma tebea te bere a misii gyinae sɛ mɛsan akyekye adwinnade no denam browser’s native Popover API no so. Bere a Mesɔɔ Popover API no hwɛe Mansesa ankɔ Popover API no a mede bedi dwuma no so efisɛ na mepɛ sɛ mesɔ biribi foforo hwɛ. Mesesaa ɛfiri sɛ na mabrɛ sɛ mɛkura tooltip suban a megye di sɛ anka ɛsɛ sɛ browser no te aseɛ dedaw no mu. Mfiase no na m’adwene mu yɛ me naa. Wɛb API foforo dodow no ara hyɛ bɔ sɛ ɛbɛyɛ mmerɛw, nanso ɛda so ara hwehwɛ gluu, edge-case handling, anaa fallback logic a ɛsan yɛ komm a ɛsan yɛ nsɛnnennen koro no ara a na worebɔ mmɔden sɛ wubeguan no. Enti, mesɔɔ Popover API no hwɛe wɔ ɔkwan ketewaa bi so. Sɛnea na ɛno te ni:
1. Keyboard “Ɛyɛ Adwuma Kɛkɛ” . Na keyboard mmoa gyina layers pii a wɔahyehyɛ no yiye so: na ɛsɛ sɛ focus kanyan tooltip no, na ɛsɛ sɛ blur de sie, na ɛsɛ sɛ wɔde nsa de wire gu Esc so, na bere a wɔde yɛ adwuma no ho hia. Sɛ wopa edge case biako a, adwinnade no bɛtena hɔ akyɛ dodo anaasɛ ɛbɛyera ansa na wɔatumi akenkan. Sɛ wɔde popover attribute no si auto anaa manual so a, browser no gye mfitiaseɛ no: Tab ne Shift+Tab yɛ wɔn ade sɛdeɛ ɛteɛ, Esc to adwinnadeɛ no mu berɛ biara, na ɛho nhia sɛ wɔtie atiefoɔ foforɔ biara.
Nea ɛyera fii me codebase mu ne wiase nyinaa keydown handlers, Esc-specific cleanup logic, ne state checks bere a keyboard navigation no. Keyboard osuahu no gyaee sɛ ɛbɛyɛ biribi a ɛsɛ sɛ mehwɛ so, na ɛbɛyɛɛ browser guarantee. 2. Screenreader Nsɛm a Wɔka Kyerɛ Ná eyi ne...nkɔso kɛse a aba. Sɛ wɔde ahwɛyiye yɛ ARIA adwuma mpo a, na suban no gu ahorow, sɛnea madi kan aka ho asɛm no. Ná nsakrae ketewaa biara te nka sɛ asiane wom. Sɛ wode popover a ɛwɔ dwuma a ɛfata di dwuma a, ɛte sɛ nea ɛyɛ den kɛse na wotumi hyɛ ho nkɔm sɛnea nea ɛbɛba no te:
Na here’s another win: Afei nsakrae no, Lighthouse gyaee frankaa a ɛnteɛ ARIA ɔman kɔkɔbɔ ma nkitahodi no, titiriw esiane sɛ amanne kwan so ARIA aman bio nni hɔ bio ma me sɛ akwanhyia mu nya mfomso.
3. Adwene a Wɔde Si Nneɛma So Ho Dwumadi Kan no na adwene a wɔde si biribi so no yɛ nea ɛyɛ mmerɛw. Ansa na ɛreba no, na mewɔ mmara te sɛ: ma focus trigger nkyerɛ tooltip, fa focus kɔ tooltip mu na ɛnto mu, blur trigger bere a ɛbɛn dodo, na to tooltip mu na san fa focus san de nsa. Eyi yɛɛ adwuma kosii sɛ anyɛ adwuma. Popover API no, browser no hyɛ model a ɛnyɛ den a ɛwɔ baabi a focus betumi akɔ popover no mu wɔ awosu mu. Sɛ wɔto popover no mu a, ɛsan de adwene kɔ trigger no so, na focus traps a aniwa nhu anaasɛ focus bere a ayera biara nni hɔ. Na mamfa focus restoration code anhyɛ mu; Miyii no fii hɔ.
Awiei Popover API no kyerɛ sɛ tooltips nyɛ biribi a woyɛ ho mfonini bio. Wɔyɛ biribi a browser no te ase. Bue, to mu, keyboard suban, Escape handling, ne accessibility kɛseɛ bi seesei firi platform no ankasa mu, ɛnyɛ ad-hoc JavaScript. Ɛno nkyerɛ sɛ tooltip nhomakorabea ahorow no atwam efisɛ ntease da so ara wɔ nhyehyɛe a ɛyɛ den, nsakrae a emu yɛ duru, anaa agyapade anohyeto ahorow, nanso default no asesa. Nea edi kan koraa no, adwinnade ho nyansahyɛ a ɛyɛ mmerɛw sen biara nso betumi ayɛ nea ɛteɛ sen biara. Sɛ wopɛ sɛ wuhu a, sɔ sɔhwɛ yi hwɛ: Fa Popover API si adwinnade biako pɛ a ɛwɔ wo nneɛma mu no ananmu kɛkɛ, nsan nkyerɛw biribiara bio, ntu nhyehyɛe mũ bi nkɔ baabi foforo, na paw biako kɛkɛ na hwɛ nea ɛyera fi wo koodu no mu. Sɛ platform no ma wo primitive a eye a, nkonimdi no nyɛ JavaScript nkyerɛwde kakraa bi kɛkɛ, na mmom ɛyɛ nneɛma kakraa bi a ɛsɛ sɛ wohaw wo ho koraa. Hwɛ source code no nyinaa wɔ me GitHub repo no mu. Akenkan a Ɛkɔ Akyiri Sɛ wopɛ dives a emu dɔ wɔ popovers ne API ahorow a ɛfa ho mu a:
“Poppin’ In”, Geoff Graham na ɔkyerɛwee “Abusuabɔ a Ɛda Popovers ne Nkɔmmɔbɔ Ntam a Wɔma Da Ada hɔ”, Zell Liew “Dɛn ne popover=hint?”, Una Kravets “Ahyɛde a Wɔfrɛ no”, Daniel Schwarz “Wɔreyɛ Auto-Closing Notification a wɔde HTML Popover di dwuma”, Preethi Bue UI Popover API Nkyerɛkyerɛmu “Pop(over) Balloons no so”, John Rhea “CSS Anchor a Wɔde Sisi”, Juan Diego Rodríguez
MDN nso de mfiridwuma ho nkrataa a edi mũ ma Popover API no.
