Manaʻo ʻo Tooltips ka pilikia UI liʻiliʻi loa āu e loaʻa ai. He ʻuʻuku lākou a hūnā maʻamau. Ke nīnau kekahi i ke kūkulu ʻana i kekahi, ʻaneʻane hoʻi mai ka pane kuʻuna me ka hoʻohana ʻana i kekahi waihona JavaScript. A no ka manawa lōʻihi, ʻo ia ka ʻōlelo aʻo kūpono. Ua hahai au. Ma ka ʻaoʻao, maʻalahi kahi mea hana. E kau a nānā i kahi mea, e hōʻike i kahi pahu liʻiliʻi me kekahi kikokikona, a laila hūnā i ka wā e neʻe aku ai ka mea hoʻohana. Akā ke hoʻouna aku ʻoe i kekahi i nā mea hoʻohana maoli, hoʻomaka nā kihi e hōʻike. ʻO nā mea hoʻohana papapāpāpā E hoʻopaʻa i ka mea hoʻoheheʻe, akā ʻaʻole ʻike i ka mea hana. Hoʻolaha ka poʻe heluhelu pale i ʻelua, ʻaʻole loa. ʻOliʻoli ka mea hana ke neʻe wikiwiki ʻoe i ka ʻiole. Hoʻopili ia i nā ʻike ma nā pale liʻiliʻi. ʻAʻole pani ke kaomi iā Esc. Nalo ka manaʻo. I ka wā lōʻihi, ua ulu kaʻu codetip code i kahi mea aʻu i makemake ʻole ai e loaʻa hou. Ua ahu nā mea hoʻolohe hanana. Pono e hoʻokaʻawale ʻia ka hover a me ka nānā ʻana. Pono nā kaomi waho i nā hihia kūikawā. Pono e mālama ʻia nā ʻano ARIA me ka lima. ʻO kēlā me kēia hoʻoponopono liʻiliʻi i hoʻohui i kahi papa o ka loiloi. Ua kōkua nā hale waihona puke, akā ua like lākou me nā pahu ʻeleʻele aʻu i hana ai ma mua o ka hoʻomaopopo piha ʻana i nā mea e hana nei ma hope o nā hiʻohiʻona. ʻO ia ka mea i koi iaʻu e nānā i ka Popover API hou. Ua makemake au e ʻike i ka mea e hiki mai ana ke kūkulu hou au i kahi hāmeʻa hoʻokahi me ka hoʻohana ʻana i ke kumu hoʻohālike maoli o ka polokalamu kele me ke kōkua ʻole o kahi waihona. Ke hoʻomaka nei mākou, pono e hoʻomaopopo ʻia, e like me nā hiʻohiʻona hou, aia kekahi mau mea me ia e hao ʻia nei. ʻO kēlā ʻōlelo, hauʻoli ia i kēia manawa i ke kākoʻo polokalamu kele pūnaewele, ʻoiai aia kekahi mau ʻāpana i ka API holoʻokoʻa e holo nei. He mea pono ke nānā aku iā Caniuse i kēia manawa. ʻO ka "Old" Tooltip Ma mua o ka Popover API, ʻaʻole kahi pōkole ka hoʻohana ʻana i kahi waihona mea hana. ʻO ia ka paʻamau. ʻAʻole i loaʻa i nā polokalamu kele ka manaʻo maoli o kahi hāmeʻa i hana ma waena o ka ʻiole, ka papa keyboard, a me ka ʻenehana kōkua. Inā mālama ʻoe i ka pololei, ʻo kāu koho wale nō ka hoʻohana ʻana i kahi waihona, a ʻo ia kaʻu i hana ai. Ma kahi kūlana kiʻekiʻe, ua like ke kumu: kahi mea hoʻoulu, kahi mea hana huna huna, a me JavaScript e hoʻohui i nā mea ʻelua.
Ua mālama ka waihona i ka uwea e hiki ai ke hōʻike ʻia ka mea ma luna o ka hover a i ʻole ka nānā ʻana, peʻe ma ka haʻalele blur a i ʻole ka ʻiole, a hoʻonohonoho hou i ka nui ma ka ʻōwili.
I ka wā lōʻihi, hiki ke maʻalahi ka mea hana. ʻO nā loli liʻiliʻi i lawe i ka pilikia. ʻO nā hoʻoponopono liʻiliʻi i hana i nā regressions. ʻOi aku ka maikaʻi, ʻo ka hoʻohui ʻana i nā mea hana hou i hoʻoili i ka paʻakikī like. Ua hana nā mea ma ke ʻano loea, akā ʻaʻole i manaʻo ʻia a hoʻopau ʻia. ʻO ia ke kūlana o nā mea i koʻu hoʻoholo ʻana e kūkulu hou i ka hāmeʻa me ka hoʻohana ʻana i ka Popover API maoli o ka polokalamu kele pūnaewele. ʻO ka manawa aʻu i hoʻāʻo ai i ka Popover API ʻAʻole au i hoʻololi i ka hoʻohana ʻana i ka Popover API no ka mea makemake wau e hoʻokolohua me kahi mea hou. Ua hoʻololi au no ka mea ua luhi au i ka mālama ʻana i nā ʻano mea hana aʻu i manaʻo ai ua maopopo i ka polokalamu kele pūnaewele. Ua kanalua au i ka mua. ʻO ka hapa nui o nā API pūnaewele hou e hoʻohiki i ka maʻalahi, akā makemake mau i ke kāpili, ka mālama ʻana i ka hihia, a i ʻole ka loiloi fallback e hana hou i ka paʻakikī like āu e hoʻāʻo nei e pakele. No laila, ua ho'āʻo wau i ka Popover API ma ke ala liʻiliʻi loa. Eia ke ʻano o ia mea:
1. ʻO ka papa keyboard "Hana wale" Ua hilinaʻi ke kākoʻo papa keyboard i nā ʻāpana he nui e laina pololei ana: pono ka nānā ʻana e hoʻomaka i ka hāmeʻa, pono e hūnā i ka blur, pono e hoʻopaʻa lima ʻia ʻo Esc, a he mea nui ka manawa. Inā hala ʻoe i hoʻokahi pahu lihi, e wehe lōʻihi a nalo paha ka mea hana ma mua o ka heluhelu ʻana. Me ke ʻano popover i hoʻonohonoho ʻia i ka auto a i ʻole ka manual, lawe ka polokalamu kele i nā mea kumu: Tab a me Shift+Tab e hana maʻamau, pani ʻo Esc i ka mea hana i kēlā me kēia manawa, ʻaʻohe mea hoʻolohe hou.
ʻO ka mea i nalowale mai kaʻu codebase, ʻo ia nā mea hoʻohana kī kī honua, Esc-specific cleanup logic, a me nā loiloi mokuʻāina i ka wā o ka hoʻokele keyboard. Ua pau ka ʻike keyboard i kahi mea aʻu e mālama ai, a ua lilo ia i mea hōʻoia pūnaewele. 2. Hiki i ka mea heluhelu heluhelu ʻO kēia kahoʻomaikaʻi nui loa. ʻOiai me ka hana ARIA akahele, ʻokoʻa ka ʻano, e like me kaʻu i hōʻike mua ai. ʻO kēlā me kēia hoʻololi liʻiliʻi i manaʻo ʻia he pilikia. ʻO ka hoʻohana ʻana i kahi popover me kahi kuleana kūpono e nānā a ʻoi aku ka paʻa a hiki ke wānana a hiki i ka mea e hiki mai ana:
A eia kekahi lanakila: Ma hope o ka hoʻololi ʻana, ua hoʻōki ʻo Lighthouse i ka hae ʻana i nā ʻōlelo aʻo a ka mokuʻāina ARIA hewa no ka launa pū ʻana, no ka mea, ʻaʻohe mau mokuʻāina ARIA maʻamau noʻu e hana hewa.
3. Manao Manao He palupalu ka nānā ʻana. Ma mua, ua loaʻa iaʻu nā lula e like me: e hoʻokuʻu i ka hoʻomaka ʻana e hōʻike i ka mea paahana, e hoʻoneʻe i ka manaʻo i ka hāmeʻa a ʻaʻole e pani, blur trigger ke kokoke loa, a pani i ka hāmeʻa a hoʻihoʻi lima me ka lima. Ua hana kēia a hiki ʻole. Me ka Popover API, hoʻokō ka polokalamu kele pūnaewele i kahi hiʻohiʻona maʻalahi kahi e neʻe maoli ai ka manaʻo i ka popover. ʻO ka pani ʻana i ka popover e hoʻihoʻi i ka manaʻo i ke kumu, a ʻaʻohe mau pahele nānā ʻike ʻole ʻia a i ʻole nā manawa nānā i nalowale. A ʻaʻole au i hoʻohui i ke code hoihoi hou; Ua wehe au.
Ka hopena 'O ka Popover API 'o ia ho'i, 'a'ole ia he mea ho'ohālike i nā mea hana. He mea lākou i hoʻomaopopo ʻia e ka polokalamu kele pūnaewele. ʻO ka wehe ʻana, ka pani ʻana, ka ʻano kīpē, ka lawelawe ʻana i pakele, a me kahi ʻāpana nui o ka hiki ke hele mai i kēia manawa mai ka paepae ponoʻī, ʻaʻole mai ka JavaScript ad-hoc. ʻAʻole ia manaʻo ua pau nā hale waihona puke mea hana no ka mea ʻike mau lākou i nā ʻōnaehana hoʻolālā paʻakikī, hoʻoponopono koʻikoʻi, a i ʻole nā koi hoʻoilina, akā ua hoʻololi ka paʻamau. No ka manawa mua, hiki i ka mea hana maʻalahi ke lilo i mea pololei loa. Inā makemake ʻoe, e hoʻāʻo i kēia hoʻokolohua: E hoʻololi wale i hoʻokahi tooltip i kāu huahana me ka Popover API, mai kākau hou i nā mea āpau, mai neʻe i kahi ʻōnaehana holoʻokoʻa, a koho wale i hoʻokahi a ʻike i ka mea e nalowale ana mai kāu code. Ke hāʻawi ka paepae iā ʻoe i kahi primitive ʻoi aku ka maikaʻi, ʻaʻole nā laina liʻiliʻi wale nō ka lanakila o JavaScript, akā he liʻiliʻi nā mea āu e hopohopo ai. E nānā i ka helu kumu piha i kaʻu GitHub repo. Heluhelu hou No ka luʻu hohonu i nā popovers a me nā API pili:
"Poppin 'In", Geoff Graham "E wehewehe ana i ka pilina ma waena o Popovers a me Dialogs", Zell Liew “He aha ka popover=hint?”, Una Kravets "Kauoha Invoker", Daniel Schwarz "Ka hana ʻana i kahi hoʻolaha hoʻopaʻa ʻana me kahi HTML Popover", Preethi Wehe i ka UI Popover API wehewehe "Pop(over) the Balloons", John Rhea "Css Anchor Positioning", Juan Diego Rodríguez
Hāʻawi pū ʻo MDN i nā palapala ʻenehana piha no ka Popover API.
