Tooltips akka rakkoo UI isa xiqqaa qabaachuu dandeessutti sitti dhagahama. Isaan xixiqqoo fi yeroo baay’ee dhokatanidha. Namni tokko akkamitti tokko ijaarra jedhee yeroo gaafatu, deebii aadaa yeroo hunda jechuun ni danda'ama mana kitaabaa JaavaScript tokko tokko fayyadamuun deebi'a. Yeroo dheeraaf immoo gorsi hubannoo qabu sun ture. Anillee hordofe. Fuula irraa yoo ilaalle, gorsi meeshaa salphaadha. Qabeentaa tokko irratti ol kaa'i ykn xiyyeeffadhu, saanduqa xiqqoo barruu tokko tokko waliin agarsiisi, sana booda yeroo fayyadamaan fagaatu dhoksi. Garuu tokko fayyadamtoota dhugaatti erga ergitee booda, qarreewwan agarsiisuu jalqabu. Fayyadamtoota kiiboordii Caancala gara kakaasitti, garuu gonkumaa gorsa meeshaa hin argi. Dubbistoonni iskiriinii yeroo lama, ykn tasumaa hin beeksisan. Gorsi meeshaa yeroo hantuutee saffisaan sochooftu ni lilmoo. Qabiyyee iskiriinii xixiqqoo irratti wal-irra buusa. Esc dhiibuun hin cufu. Xiyyeeffannaan ni bada. Yeroo booda koodii tooltip koo gara waan kana booda qabaachuu hin barbaannetti guddate. Dhaggeeffattoonni taatee walitti tuulaman. Hover fi focus addaan qabamuu qaba ture. Cuqaasni alaa haala addaa barbaachisa ture. Amaloonni ARIA harkaan walsimsiisuun dirqama ture. Sirreeffamni xiqqaan hundi laayibarii loojikii biraa itti dabale. Manneen kitaabaa gargaaran, garuu waan duubaan ta'aa jiru guutummaatti hubachuu mannaa saanduqa gurraacha ani naannoo kootti hojjedhu fakkaatu turan. Kanatu API Popover haaraa akkan ilaalu na dhiibe. Gargaarsa mana kitaabaa malee moodeela dhalootaa biraawzariitti fayyadamuun gorsa meeshaa tokko yoo deebisee ijaare maaltu akka ta’u ilaaluun barbaade. Yeroo jalqabnu, akkuma amala haaraa kamiyyuu, wantootni ammallee sibiilaan sibiilaan itti hojjetamaa jiran tokko tokko akka jiran hubachuun barbaachisaadha. Kana jechuun, yeroo ammaa deeggarsa biraawzari guddaa qaba, haa ta'u malee API waliigalaa irratti kutaaleen hedduun jijjiirama keessa jiran. Gidduu kana Caniuse irratti ijaan ilaaluun barbaachisaadha. Gorsa Meeshaa “Duurii”. API Popover dura, mana kitaabaa gorsa meeshaa fayyadamuun karaa gabaabaa hin turre. Innis durtii ture. Braawzaroonni yaada dhalootaa gorsa meeshaa hantuutee, kiiboordii fi teeknooloojii gargaaraa hunda irratti hojjetu hin qaban turan. Yoo sirrii ta'uuf dhimmamte, filannoo kee mana kitaabaa fayyadamuu qofa ture, anis sirriitti kanuma. Sadarkaa olaanaa irratti, shaakala yeroo hunda tokko ture: qaama kakaasisaa, qaama gorsa meeshaa dhokataa, fi JaavaScript lamaan isaanii qindeessuuf.
Manni kitaabaa waayirii elementiin hover ykn focus irratti akka agarsiisu, blur ykn mouse leave irratti akka dhoksu, fi scroll irratti irra deebi'ee bakka/guddina akka jijjiiru hayyamu qaba ture.
Yeroo booda, gosti meeshaa sun dadhaboo taʼuu dandaʼa. Jijjiiramni xixiqqoo balaa qaba ture. Sirreeffamni xixiqqoo duubatti deebi'uu fide. Kan caalaa hammaatu ammoo, gorsa meeshaalee haaraa dabaluunis walxaxiinsa walfakkaatu dhaale. Wantoonni teeknikaan hojjetan, garuu gonkumaa akka qubatan ykn guutuu ta’an itti hin dhaga’amne. Yeroon API dhalootaa browser’s native Popover API fayyadamuun tooltip deebisee ijaaruuf murteesse haalli wantootaa sun ture. Yeroon Yaale The Popover API Waan haaraa yaaluun waanan barbaadeef gara API Popover fayyadamuutti hin jijjiiramne. Amala tooltip kan browser duraan hubachuu qaba jedhee amanu eeguu waanan dadhabeef jijjiire. Jalqaba irratti shakkii qaba ture. APIn weeb haaraan baay'een isaanii salphaa ta'uu waadaa seenu, garuu ammas kolaa, qabachuu qarqara-keesii, ykn loojikii duubatti deebi'uu kan callisee walxaxiinsa walfakkaatu kan ati miliquuf yaalaa turte irra deebi'ee uumu barbaadu. Kanaafuu, API Popover karaa xiqqaa ta'een yaaleera. Sun maal fakkaata ture kunooti:
uuma jedhu
tti bulcha
1. Kiiboordiin “Hojjeta Qofa” . Deeggarsi kiiboordii laayiyeroota hedduu sirritti sararamuu irratti hundaa'a ture: xiyyeeffannaan gorsa meeshaa kakaasuu qaba, jajjabeessuun dhoksuu qaba, Esc harkaan wayaa ta'uu qaba, yeroon immoo dhimma qaba. Yoo keesii qarqara tokko darbite, gorsi meeshaa yookaan yeroo dheeraaf banaa ta'a ykn osoo hin dubbifamin ni bada. Amalli popover gara ofumaan ykn harkaan qindaa'ee, biraawzari bu'uuraalee fudhata: Caancala fi Shift+Tab akka idileetti amala qabu, Esc yeroo hunda gorsa meeshaa cufa, dhaggeeffattoonni dabalataas hin barbaachisu.
Wanti kuusdeetaa koodii koo irraa bade, qabduu furtuu addunyaa, loojikii qulqulleessituu Esc-specific, fi sakatta'iinsa haalaa yeroo navigeeshinii kiiboordii ture. Muuxannoon kiiboordii waan ani kunuunsuu qabu ta'uu dhiisee, wabii biraawzari ta'e. 2. Tilmaama Dubbisaa Iskiriinii Kunis kan turefooyya’iinsa guddaa. Hojii ARIA of eeggannoodhaan hojjetame illee, akkuman kanaan dura ibse, amala garaagarummaa qaba. Jijjiiramni xiqqaan hundi balaa akka qabu itti dhaga’ama ture. Popover gahee sirrii qabu fayyadamuun hanga waan ta’uuf deemutti baay’ee tasgabbaa’aa fi tilmaamamuu danda’u fakkaata fi itti dhaga’ama:
Akkasumas kunoo injifannoo biraa: Jijjiirraa booda, Lighthouse akeekkachiisa haala ARIA sirrii hin taane walqunnamtii sanaaf alaabaa kaa’uu dhiise, sababni isaas baay’inaan sababni isaas kana booda haalawwan ARIA aadaa akka tasaa dogoggoraan akkan argadhu hin jiran.
3. Bulchiinsa Xiyyeeffannoo Xiyyeeffannaan duraan dadhaboo ture. Duraan, seera akka: focus trigger haa tooltip agarsiisu, focus gara tooltip tti sochoosi hin cufin, trigger yeroo baay’ee dhihaatu blur, fi tooltip cufuu fi focus harkaan deebisuu qaba ture. Kun hanga hin hojjennetti hojjete. API Popover waliin, biraawzariin moodeela salphaa bakka xiyyeeffannaan uumamaan gara popover tti socho'uu danda'u dirqisiisa. Popover cufuun xiyyeeffannoo gara trigger tti deebisa, kiyyoowwan xiyyeeffannoo hin mul'anne ykn yeroowwan xiyyeeffannoo bade hin jiran. Akkasumas koodii deebisanii dhaabuu xiyyeeffannoo hin daballe; Anis irraa buqqise.
Xumura APIn Popover jechuun gorsi meeshaalee kana booda waan ati fakkeessitu miti jechuudha. Isaan waan biraawzariin hubatudha. Banuun, cufuun, amala kiiboordii, Escape handling, fi dhaqqabummaa guddaan amma waltajjii mataa isaa irraa dhufa malee JavaScript yeroof hin taane. Kana jechuun man'ee kitaabaa gorsa meeshaa dulloome jechuu miti sababiin isaas ammallee sirnoota dizaayinii walxaxaa, dhuunfachiisa ulfaataa, ykn danqaalee hambaadhaaf hiika qaba, garuu durtiin jijjiirameera. Yeroo jalqabaatiif, gorsi meeshaa salphaan immoo isa hunda caalaa sirrii ta'uu danda'a. Yoo fedhii barbaadde, yaalii kana yaali: Salphaatti gorsa meeshaa tokko qofa oomisha kee keessatti Popover APIn bakka buusi, waan hunda irra deebitee hin barreessiin, sirna guutuu hin godaansiin, tokko qofa fudhadhuutii maaltu koodii kee irraa akka badu ilaali. Yeroo waltajjiin primitive fooyya'aa siif kennu, injifannoon sarara JaavaScript muraasa qofa osoo hin taane, wantoota tasumaa yaadda'uu qabdan xiqqaadha. Koodii madda guutuu GitHub repo koo keessatti ilaalaa. Dubbisa Dabalataa Popovers fi APIwwan walqabatan keessatti gadi fageenyaan cuuphamuuf:
“Poppin’ In”, Jeef Giraaham “Hariiroo Popovers fi Dialogs Gidduu Jiru Qulqulleessuu”, Zell Liew “Popoover=hint maali?”, Una Kravets “Ajajoota Waamichaa”, Daani’eel Shuwaarz “HTML Popover tiin Beeksisa Ofiin Cufamuu Uumuu”, Preethi Ibsituu API Popover UI banaa “Pop(over) the Balloons”, Joon Riiyaa “CSS Anchor Positioning”, Kuwaan Diyeegoo Roodriigeez
MDN akkasumas Popover API'f sanada teeknikaa bal'aa ni dhiheessa.
