Ntuziaka ngwaọrụ dị ka nsogbu UI kacha nta ị nwere ike ịnwe. Ha dị ntakịrị ma na-ezokarị ezo. Mgbe mmadụ jụrụ otu esi arụ otu, azịza ọdịnala na-abịaghachi mgbe niile site na iji ụfọdụ ọba akwụkwọ Javascript. Ma ruo ogologo oge, nke ahụ bụ ndụmọdụ ezi uche dị na ya. M sokwa ya. N'elu elu, ngwa ọrụ dị mfe. Figharịa ma ọ bụ lekwasị anya na mmewere, gosi obere igbe nwere ụfọdụ ederede, wee zoo ya mgbe onye ọrụ ga-apụ. Mana ozugbo ị bugara otu ndị ọrụ n'ezie, akụkụ ya na-amalite igosi. Ndị ọrụ ahụigodo Tab n'ime ihe na-akpalite, mana ahụla ntụnye aka. Ndị na-agụ ihuenyo na-akpọsa ya ugboro abụọ, ma ọ bụ na ọ bụghị ma ọlị. Ntụpọ ngwá ọrụ na-amagharị mgbe ị na-ebugharị òké ngwa ngwa. Ọ na-ekpuchi ọdịnaya na ihuenyo nta. Ịpị Esc anaghị emechi ya. Ntụkwasị obi na-efunahụ ya. Ka oge na-aga, koodu ntinye akwụkwọ m tolitere ghọọ ihe na-achọghị m ịnwe ọzọ. Ndị na-ege ihe omume gbakọtara. Ekwesịrị ijikwa hover na ilekwasị anya iche iche. Mpịpị n'èzí chọrọ ikpe pụrụ iche. Ekwesịrị iji aka dokọkwa àgwà ARIA. Ndozi obere ọ bụla gbakwunyere usoro mgbagha ọzọ. Ọbá akwụkwọ nyere aka, mana ha dịkwa ka igbe ojii m rụrụ ọrụ gburugburu kama ịghọta nke ọma ihe na-eme n'azụ ihe nkiri. Nke ahụ bụ ihe kpaliri m ileba anya na Popover API ọhụrụ. Achọrọ m ịhụ ihe ga-eme ma ọ bụrụ na m wughachi otu ngwa ngwa site na iji ụdị ala ihe nchọgharị na-enweghị enyemaka nke ọbá akwụkwọ. Dị ka anyị na-amalite, ọ dị mma ịmara na, dị ka ihe ọhụrụ ọ bụla, e nwere ihe ụfọdụ na ya ka a na-agbanye ígwè. Nke ahụ kwuru, ọ na-enweta nkwado ihe nchọgharị ugbu a, n'agbanyeghị na enwere ọtụtụ iberibe na API n'ozuzu ya na-aga n'ihu. Ọ bara uru ileba anya Caniuse n'oge a. Ntuziaka "Ochie" ahụ Tupu Popover API, iji ọbá akwụkwọ Tooltip abụghị ụzọ mkpirisi. Ọ bụ ndabara. Ihe nchọgharị enweghị echiche ala nna nke ngwa ọrụ na-arụ ọrụ n'ofe òké, ahụigodo, na teknụzụ enyemaka. Ọ bụrụ na ị na-eche maka izi ezi, naanị nhọrọ gị bụ iji ụlọ akwụkwọ, na nke ahụ bụ kpọmkwem ihe m mere. N'ọkwa dị elu, ụkpụrụ ahụ na-abụ otu ihe mgbe niile: ihe na-akpali akpali, ihe eji eme ihe zoro ezo, na Javascript iji hazie abụọ ahụ.
Ọbá akwụkwọ ahụ na-edozi wiwi nke kwere ka mmewere ahụ gosipụta na ntugharị ma ọ bụ gbado anya, zoo na blur ma ọ bụ ezumike òké, wee gbanwee/mezigharịa na mpịakọta.
Ka oge na-aga, ngwaọrụ ahụ nwere ike ịdị na-emebi emebi. Obere mgbanwe nwere ihe egwu. Ndozi ndị dị nta kpatara nlọghachi azụ. Nke ka njọ, ịgbakwunye ngwa ọrụ ọhụrụ ketara otu mgbagwoju anya. Ihe na-arụ ọrụ na teknụzụ, mana ọ nweghị mmetụta nke edoziri ma ọ bụ zuo oke. Nke ahụ bụ ọnọdụ ihe mgbe m kpebiri iwughachi ngwaọrụ ahụ site na iji Popover API nke ihe nchọgharị ahụ. Oge m nwara Popover API Agbanweghị m iji Popover API n'ihi na achọrọ m ịnwale ihe ọhụrụ. Agbanwere m n'ihi na ike agwụla m idebe omume Tooltip nke m kwenyere na ihe nchọgharị ahụ kwesịrị ịghọtabu. Enwere m obi abụọ na mbụ. Imirikiti API webụ ọhụrụ na-ekwe nkwa ịdị mfe, mana ka chọrọ gluu, njikwa ihu ihu, ma ọ bụ mgbagha azụ nke na-eji nwayọọ na-emegharị otu mgbagwoju anya ahụ ị na-achọ ịgbanarị. Yabụ, anwalere m Popover API n'ụzọ kacha nta enwere ike. Nke a bụ ihe nke ahụ dị ka:
1. Ahụigodo ahụ "Naanị Na-arụ ọrụ" Nkwado ahụigodo dabere n'ọtụtụ ọkwa na-agbakọ nke ọma: elekwasị anya ga-akpalite ngwa ọrụ, blur ga-ezobe ya, Esc ga-eji aka jiri wired, yana oge dị mkpa. Ọ bụrụ na ị tufuru otu ikpe ihu, ntụaka ngwaọrụ ahụ ga-emeghe ogologo oge ma ọ bụ na-apụ n'anya tupu enwee ike ịgụ ya. Site na njirimara popover ka edobere na akpaaka ma ọ bụ akwụkwọ ntuziaka, ihe nchọgharị ahụ na-eweghara ihe ndị bụ isi: Tab na Shift + Tab na-akpa àgwà nke ọma, Esc na-emechi stụ aka mgbe ọ bụla, ọ nweghịkwa ndị na-ege ntị chọrọ.
Ihe kwụsịrị na codebase m bụ ndị na-ahụ maka igodo mgbada zuru ụwa ọnụ, mgbanaka nhicha dị iche iche Esc, yana nlele steeti n'oge igodo igodo. Ahụmahụ ahụigodo kwụsịrị ịbụ ihe m ga-edobe, wee bụrụ nkwa ihe nchọgharị. 2. Ihuenyo amụma amụma Nke a bụnnukwu nkwalite. Ọbụna na-arụ ọrụ ARIA nke ọma, omume ahụ dịgasị iche iche, dịka m kọwara na mbụ. Obere mgbanwe ọ bụla nwere mmetụta dị ize ndụ. Iji popover nwere ọrụ kwesịrị ekwesị na-ele anya ma na-enwe mmetụta nke kwụsiri ike na nke a ga-ebu amụma ruo ihe ga-eme:
Ma nke a bụ mmeri ọzọ: Mgbe mgbanwe ahụ gasịrị, Lighthouse kwụsịrị ịkọ ịdọ aka ná ntị steeti ARIA na-ezighi ezi maka mmekọrịta ahụ, n'ihi na ọ dịghịzi obodo ARIA omenala maka m na-emejọ na mberede.
3. Nlekọta anya Nlebara anya na-adịbu nke na-esighi ike. Tupu mgbe ahụ, enwere m iwu dị ka: ka elekwasị anya kpalite ihe ngosi ngwá ọrụ, bugharịa nlebara anya n'ime ngwá ọrụ na adịghị emechi, na-eme ka ọ bụrụ ihe na-eme ka ọ dị nso, na nso ngwa ngwa ma weghachi aka na aka. Nke a na-arụ ọrụ ruo mgbe ọ naghị arụ ọrụ. Site na Popover API, ihe nchọgharị na-akwado ụdị dị mfe ebe elekwasị anya nwere ike ịbanye na popover. Imechi popover na-alaghachi na-elekwasị anya na mkpalite, na enweghị ọnyà elekwasị anya na-adịghị ahụ anya ma ọ bụ oge nlebara anya furu efu. Ma etinyeghị m koodu mweghachi elekwasị anya; Ewepụrụ m ya.
Mmechi Popover API pụtara na ndụmọdụ ngwaọrụ abụghịzi ihe ị na-eṅomi. Ha bụ ihe ihe nchọgharị ahụ ghọtara. Imeghe, mmechi, omume ahụigodo, njikwa mgbapụ, yana nnukwu ohere ịnweta ugbu a sitere na ikpo okwu n'onwe ya, ọ bụghị site na ad-hoc JavaScript. Nke ahụ apụtaghị na ọba akwụkwọ nrịbama ngwá ọrụ adịkwaghị adị n'ihi na ha ka nwere ezi uche maka usoro nhazi dị mgbagwoju anya, nhazi dị arọ, ma ọ bụ ihe mgbochi, mana ndabara agbanweela. Maka oge mbụ, ndụmọdụ ngwaọrụ kachasị mfe nwekwara ike bụrụ nke kachasị mma. Ọ bụrụ na ị na-achọ ịmata ihe, nwaa nnwale a: Naanị dochie naanị otu ngwa ngwa n'ime ngwaahịa gị na Popover API, edeghachila ihe niile, agaghachila usoro niile, wee họrọ otu wee hụ ihe na-apụ na koodu gị. Mgbe ikpo okwu na-enye gị oge ochie ka mma, mmeri abụghị naanị ahịrị Javascript pere mpe, mana ọ bụ ihe ole na ole ị ga-echegbu onwe gị ma ọlị. Lelee koodu isi mmalite na GitHub repo m. Ọgụgụ ọzọ Maka imikpu miri emi n'ime popovers na API ndị metụtara ya:
"Poppin' In", Geoff Graham "Ịkọwa mmekọrịta dị n'etiti Popovers na Dialogs", Zell Liew "Gịnị bụ popover=atụmatụ?", Una Kravets "Iwu ndị na-akpọ oku", Daniel Schwarz "Ịmepụta ọkwa na-emechi onwe ya site na iji HTML Popover", Preethi Mepee UI Popover API Explainer "Gbapụta (n'elu) balloons", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN na-enyekwa akwụkwọ ọrụ aka zuru oke maka Popover API.
