Dikeletso tsa didirisiwa di utlwala e kete ke bothata jo bonnye thata jwa UI jo o ka nnang le jone. Di dinnye mme gantsi di fitlhegile. Fa mongwe a botsa gore o ka aga jang, karabo e e tlwaelegileng mo e ka nnang ka metlha e boa e dirisa laeborari nngwe ya JavaScript. Mme ka nako e telele, eo e ne e le kgakololo e e utlwalang. Le nna ke ne ka e latela. Fa o leba fela, tooltip e bonolo. Tlhama kgotsa tsepamisa mogopolo mo elementeng, bontsha lebokoso le lennye le le nang le mafoko mangwe, o bo o le fitlha fa modirisi a tsamaya. Mme fa o setse o rometse e le nngwe kwa badirising ba mmatota, dintlha di simolola go bonala. Badirisi ba khiiboto Thebo mo setlhotlheletsing, mme o se ka wa bona ntlha ya sedirisiwa. Dibadi tsa sekerini di e itsise gabedi, kgotsa ga di itsise gotlhelele. Tooltip e a phatsima fa o tsamaisa peba ka bonako thata. E kopanya diteng mo diskrining tse dinnye. Go tobetsa Esc ga go e tswale. Tsepamisomogopolo e a latlhega. Fa nako e ntse e ile, khoutu ya me ya tooltip e ne ya gola ya nna sengwe se ke neng ke sa tlhole ke batla go nna le sone. Bareetsi ba tiragalo ba ne ba kgobokana. Hover le focus di ne di tshwanetse go tshwarwa ka go kgaogana. Kwa ntle tobetso hloka dikgetsi tse khethehileng. Diponagalo tsa ARIA di ne di tshwanetse go nna di tsamaisana ka diatla. Mong le e mong tokiso e nyenyane eketsa lera le leng la logic. Dilaeborari di ne di thusa, mme gape di ne di tshwana le mabokoso a mantsho a ke neng ke bereka mo go one go na le gore ke tlhaloganye ka botlalo se se neng se direga kafa morago ga ditshwantsho. Ke sone se se neng sa nkgoromeletsa go leba API e ntšha ya Popover. Ke ne ke batla go bona gore go tla diragalang fa nka aga gape ntlha e le nngwe ya sedirisiwa ke dirisa sekai sa sebatli sa tlholego kwantle ga thuso ya laeborari. Fa re simolola, go botlhokwa go ela tlhoko gore, fela jaaka ka karolo nngwe le nngwe e ntšha, go na le dilo dingwe ka yone tse di sa ntseng di baakanngwa. Seo se builwe, ga jaana e itumelela tshegetso e kgolo ya sebatli, le fa go na le dikarolo di le mmalwa tsa API ka kakaretso tse di fetogang. Go botlhokwa go nna o lebile Caniuse mo nakong eno. Sedirisiwa sa “Kgale” Pele ga Popover API, go dirisa laeborari ya dintlha tsa didirisiwa e ne e se tlhabanyetso. E ne e le thulaganyetsoruri. Dibatli di ne di sena kgopolo ya tlholego ya tooltip e e neng e dira mo pebeng, mo khiibotong, le mo thekenolojing e e thusang. Fa o ne o kgathala ka go nepagala, tsela e le nngwe fela e o neng o ka e dirisa e ne e le go dirisa laeborari, mme ke sone se ke neng ka se dira. Mo maemong a a kwa godimo, paterone e ne e ntse e tshwana: elemente e e tlhotlheletsang, elemente e e fitlhegileng ya tooltip, le JavaScript go gokaganya bobedi jono.
Laeborari e ne e tshwaragane le dithapo tse di neng di dira gore elemente e bontshe fa e tlhomame kgotsa e tsepamisitswe, go iphitlha fa e fifetse kgotsa fa e tlogetswe ke peba, le go baya/go fetola bogolo fa e le mo momenong.
Fa nako e ntse e ile, tooltip e ne e ka nna bokoa. Diphetogo tse dinnye di ne di na le kotsi. Diphetolo tse dinnye di ne tsa baka go boela morago. Se se maswe le go feta, go tsenya dintlha tse disha tsa didirisiwa go ne ga rua go raraana go go tshwanang. Dilo di ne di bereka ka setegeniki, mme ga di ise di ko di ikutlwe di tlhomame kgotsa di feletse. Eo e ne e le boemo jwa dilo fa ke ne ke swetsa ka gore ke age sešwa tooltip ke dirisa Popover API ya sebatli. Motsotso o ke Lekileng API ya Popover ka one Ga ke a fetogela go dirisa Popover API ka gonne ke ne ke batla go lekeletsa sengwe se sesha. Ke ne ka fetola ka gonne ke ne ke lapisitswe ke go boloka boitshwaro jwa tooltip jo ke neng ke dumela gore sebatli se ne se tshwanetse go bo se setse se bo tlhaloganya. Ke ne ke na le dipelaelo kwa tshimologong. Bontsi jwa di-API tse disha tsa webo di solofetsa go nna bonolo, mme di sa ntse di tlhoka sekgomaretsi, go tshwara dikgetse tsa mo dintlheng, kgotsa logic ya go boela morago e e tlhamang gape ka tidimalo go raraana go go tshwanang le go go neng o leka go go tshaba. Ka jalo, ke ne ka leka Popover API ka tsela e nnye thata e e kgonegang. Seo se ne se lebega jaana:
1. Khiiboto e “Dira Fela” Tshegetso ya khiiboto e ne e ikaegile ka dikarolo tse dintsi tse di tlhomaganeng ka tshwanelo: go tsepamisa mogopolo go ne go tshwanetse ga tlhotlheletsa ntlha ya sedirisiwa, go fifala go ne go tshwanetse go e fitlha, Esc e ne e tshwanetse go tsenngwa mogala ka seatla, mme nako e ne e le botlhokwa. Fa o ne o ka foswa ke kgetsi e le nngwe ya ntlha, ntlha ya sedirisiwa e ne e tla nna e bulegile nako e telele thata kgotsa e ne e tla nyelela pele ga e ka balwa. Ka tshwano ya popover e setilwe ho auto kapa manual, sebatli se nka dintho tsa motheo: Tab le Shift + Tab di itshwara ka tlwaelo, Esc e kwala tooltip nako le nako, mme ha ho bareetsi ba eketsehileng ba hlokehang.
Se se neng sa nyelela mo codebase ya me e ne e le ditshwari tsa keydown tsa lefatshe lotlhe, logic ya go phepafatsa e e kgethegileng ya Esc, le ditshekatsheko tsa puso ka nako ya go tsamaya mo khiibotong. Maitemogelo a khiiboto a ne a emisa go nna sengwe se ke neng ke tshwanetse go se tlhokomela, mme e ne ya nna netefaletso ya sebatli. 2. Go Bonela Pele ga Sediriswa sa Sekerini Se e ne e letokafalo e kgolo go gaisa. Le ka tiro e e kelotlhoko ya ARIA, boitshwaro bo ne bo farologana, jaaka ke tlhalositse pelenyana. Phetogo nngwe le nngwe e nnye e ne e utlwala e le kotsi. Go dirisa popover e e nang le seabe se se siameng go lebega e bile go utlwala go tlhomame thata e bile go ka bonelwa kwa pele go ya ka se se tlileng go direga:
Mme phenyo e nngwe ke eno: Morago ga go fetoga, Lighthouse e ne ya emisa go tshwaya ditlhagiso tse di sa siamang tsa puso ya ARIA tsa tirisanommogo, bogolosegolo ka gonne ga go tlhole go na le dinaga tsa ARIA tse di tlwaelegileng gore ke fose ka phoso.
3. Botsamaisi jwa Tsepamisomogopolo Focus e ne e le bokoa. Pele, ke ne ke na le melao e e jaaka: dira gore setlhotlheletsi sa tsepamiso se bontshe ntlha ya sedirisiwa, sutisetsa tsepamiso mo ntlha ya sedirisiwa mme o se ka wa tswala, setlhotlheletsi sa go fifala fa se le gaufi thata, mme o tswale ntlha ya sedirisiwa mme o busetse tsepamiso ka seatla. Seno se ne sa bereka go fitlha se sa bereke. Ka Popover API, sebatli se qobella mohlala o bonolo moo tsepamiso e ka tsamaelang ka tlhaho ho popover. Go tswala popover go busetsa tsepamisomogopolo kwa setlhotlheletsing, mme ga go na dirai tse di sa bonaleng tsa tsepamisomogopolo kgotsa dinako tse di latlhegileng tsa tsepamisomogopolo. Mme ga ke a tsenya khoutu ya go tsosolosa tsepamisomogopolo; Ke e tlositse.
Bokhutlo Popover API e raya gore dintlha tsa didirisiwa ga di tlhole di le sengwe se o se etsisang. Ke sengwe se sebatli se se tlhaloganyang. Go bula, go tswala, boitshwaro jwa khiiboto, go tshwara Escape, le karolo e kgolo ya phitlhelelo jaanong di tswa mo sethaleng ka bosone, e seng mo JavaScript ya nakwana. Seo ga se reye gore dilaeborari tsa dintlha tsa didirisiwa ga di tlhole di thusa ka gonne di sa ntse di dira tlhaloganyo mo ditsamaisong tse di raraaneng tsa go tlhama, go itebaganya go go bokete, kgotsa dikgoreletsi tsa bogologolo, mme thulaganyetsoruri e fetogile. Ke lekgetlo la ntlha, tooltip e e bonolo thata gape e ka nna e e nepagetseng thata. Fa o batla go itse, leka tekeletso eno: Emisetsa fela tooltip e le nngwe fela mo setlhagisweng sa gago ka Popover API, o se ka wa kwala sengwe le sengwe gape, o se ka wa fudusa tsamaiso yotlhe, mme o tlhophe fela e le nngwe mme o bone gore ke eng se se nyelelang mo khoutung ya gago. Fa sethala se go naya primitive e e botoka, phenyo ga se fela mela e le mmalwa ya JavaScript, mme ke dilo di le mmalwa tse o tshwanetseng go tshwenyega ka tsone gotlhelele. Leba khoutu ya motswedi e e feletseng mo repo ya me ya GitHub. Puiso e e Tswelelang Go bona go tsenelela mo di-popover le di-API tse di amanang le tsone:
"Go Tsena", Geoff Graham “Go Tlhalosa Kamano Magareng ga Dipopover le Dipuisano”, Zell Liew “Tlhagiso ke eng?”, Una Kravets “Ditaelo tsa Mobitsi”, Daniel Schwarz “Go Tlhama Kitsiso ya go Tswala ka Boitiriso ka Popover ya HTML”, Preethi Motlhalosi wa API ya Popover ya UI e e Butsweng “Tlhabolola (mo godimo ga) Dibalunu”, John Rhea "Go Bewa ga Setshetledi sa CSS", Juan Diego Rodriguez
MDN gape e fana ka ditokomane tse akaretsang tsa setegeniki tsa Popover API.
