Gibati sa mga tooltip nga ang pinakagamay nga problema sa UI nga mahimo nimo. Gamay sila ug kasagaran gitago. Kung adunay mangutana kung giunsa paghimo ang usa, ang tradisyonal nga tubag hapit kanunay nga mobalik gamit ang pipila nga librarya sa JavaScript. Ug sa dugay nga panahon, kana ang makatarunganon nga tambag. Gisunod ko usab kini. Sa ibabaw, ang usa ka tooltip yano ra. Pag-hover o pag-focus sa usa ka elemento, ipakita ang usa ka gamay nga kahon nga adunay pipila ka teksto, dayon itago kini kung ang tiggamit mobalhin. Apan kung ipadala nimo ang usa sa tinuud nga tiggamit, ang mga sulud magsugod sa pagpakita. Ang mga tiggamit sa keyboard Tab sa gatilyo, apan dili makita ang tooltip. Gipahibalo kini sa mga magbabasa sa screen kaduha, o dili gyud. Ang tooltip mokidlap-kidlap kon imong lihokon ang mouse nga paspas kaayo. Nag-overlap kini sa sulod sa mas gagmay nga mga screen. Ang pagpindot sa Esc dili makasira niini. Mawala ang focus. Sa paglabay sa panahon, ang akong tooltip code nahimong usa ka butang nga dili na nako gusto nga maangkon. Nagtapok ang mga tigpaminaw sa panghitabo. Ang hover ug focus kinahanglang dumalahon nga gilain. Ang mga pag-klik sa gawas nanginahanglan espesyal nga mga kaso. Ang mga hiyas sa ARIA kinahanglan nga ipadayon sa pag-sync pinaagi sa kamot. Ang matag gamay nga pag-ayo nagdugang usa ka layer sa lohika. Ang mga librarya nakatabang, apan sila usab sama sa itom nga mga kahon nga akong gitrabaho imbis nga hingpit nga masabtan kung unsa ang nahitabo sa luyo sa mga talan-awon. Mao kana ang nagtukmod kanako sa pagtan-aw sa mas bag-ong Popover API. Gusto nakong makita kung unsa ang mahitabo kung magtukod ako pag-usab sa usa ka tooltip gamit ang lumad nga modelo sa browser nga wala’y tabang sa usa ka librarya. Sa pagsugod namon, angay nga matikdan nga, sama sa bisan unsang bag-ong bahin, adunay pipila ka mga butang nga kauban niini nga giplantsa pa. Ingon niana, kini karon nalipay sa daghang suporta sa browser, bisan kung adunay daghang mga piraso sa kinatibuk-ang API nga nag-uswag. Angayan nga bantayan ang Caniuse sa kasamtangan. Ang "Karaan" nga Tooltip Sa wala pa ang Popover API, ang paggamit sa librarya sa tooltip dili usa ka shortcut. Kadto maoy default. Ang mga browser walay lumad nga konsepto sa usa ka tooltip nga nagtrabaho sa mouse, keyboard, ug assistive nga teknolohiya. Kung nahingawa ka sa pagkahusto, ang imong kapilian mao ang paggamit sa usa ka librarya, ug mao gyud kana ang akong gibuhat. Sa taas nga lebel, ang sumbanan kanunay nga parehas: usa ka elemento sa pag-trigger, usa ka tinago nga elemento sa tooltip, ug JavaScript aron ma-coordinate ang duha.
Ang librarya ang nagdumala sa mga wiring nga nagtugot sa elemento nga magpakita sa hover o focus, pagtago sa blur o mouse leave, ug reposition/resize sa scroll.
Sa paglabay sa panahon, ang tooltip mahimong mahuyang. Ang gagmay nga mga pagbag-o nagdala og risgo. Ang ginagmay nga mga pag-ayo maoy hinungdan sa mga pag-usab. Mas grabe pa, ang pagdugang sa bag-ong mga tooltip nakapanunod sa parehas nga pagkakomplikado. Ang mga butang sa teknikal nagtrabaho, apan wala gyud gibati nga husay o kompleto. Mao kana ang kahimtang sa mga butang sa dihang nakahukom ko nga tukuron pag-usab ang tooltip gamit ang lumad nga Popover API sa browser. Ang Higayon nga Gisulayan Ko Ang Popover API Wala ko mobalhin sa paggamit sa Popover API tungod kay gusto kong mag-eksperimento sa bag-ong butang. Mibalhin ko tungod kay gikapoy ko sa pagmintinar sa kinaiya sa tooltip nga akong gituohan nga masabtan na sa browser. Nagduda ko sa una. Kadaghanan sa mga bag-ong web API nagsaad sa kayano, apan nanginahanglan gihapon og papilit, pagdumala sa edge-case, o fallback nga lohika nga hilom nga naghimo pag-usab sa samang pagkakomplikado nga imong gisulayan pag-ikyas. Busa, gisulayan nako ang Popover API sa pinakagamay nga paagi nga posible. Ania kung unsa ang hitsura niini:
1. Ang Keyboard nga "Nagtrabaho Lang" Ang suporta sa keyboard nagdepende sa daghang mga lut-od nga naglinya sa hustong paagi: ang pag-focus kinahanglan nga mag-trigger sa tooltip, blur kinahanglan nga itago kini, Esc kinahanglan nga mano-mano nga wired, ug timing importante. Kung nasipyat ka sa usa ka edge case, ang tooltip mahimong magpabiling bukas og dugay o mawala sa dili pa kini mabasa. Uban ang popover attribute nga gitakda sa awto o manwal, ang browser maoy mopuli sa mga sukaranan: Tab ug Shift+Tab nga normal ang paggawi, ang Esc magsira sa tooltip matag higayon, ug walay dugang tigpaminaw ang gikinahanglan.
Ang nawala sa akong codebase mao ang mga global keydown handler, Esc-specific cleanup logic, ug state checks atol sa keyboard navigation. Ang kasinatian sa keyboard mihunong nga usa ka butang nga kinahanglan nakong ipadayon, ug nahimo kini nga garantiya sa browser. 2. Pagkatag-an sa Screenreader Kini mao angpinakadako nga kalamboan. Bisan sa mabinantayon nga pagtrabaho sa ARIA, lainlain ang pamatasan, sama sa akong gilatid sa sayo pa. Ang matag gamay nga pagbag-o gibati nga peligro. Ang paggamit sa usa ka popover nga adunay husto nga papel tan-awon ug gibati nga labi ka lig-on ug matag-an kung unsa ang mahitabo:
Ug ania ang lain nga kadaugan: Pagkahuman sa switch, ang Lighthouse mihunong sa pag-flag sa dili husto nga mga pasidaan sa estado sa ARIA alang sa interaksyon, labi na tungod kay wala nay naandan nga mga estado sa ARIA nga ako aksidenteng masayop.
3. Pagdumala sa Focus Kaniadto huyang ang focus. Kaniadto, naa koy mga lagda sama sa: tugoti ang focus trigger nga magpakita sa tooltip, ibalhin ang focus sa tooltip ug ayaw isira, blur trigger kung duol ra kaayo, ug isara ang tooltip ug ibalik ang focus sa mano-mano. Nagtrabaho kini hangtod nga wala. Uban sa Popover API, ang browser nagpatuman sa usa ka mas simple nga modelo diin ang focus mahimong mas natural nga mobalhin ngadto sa popover. Ang pagsira sa popover ibalik ang focus sa gatilyo, ug walay dili makita nga mga lit-ag sa focus o nawala nga mga gutlo sa focus. Ug wala ko magdugang focus restoration code; Gitangtang nako.
Panapos Ang Popover API nagpasabot nga ang mga tooltip dili na usa ka butang nga imong gisundog. Kini usa ka butang nga masabtan sa browser. Ang pag-abli, pagsira, pamatasan sa keyboard, pagdumala sa pag-ikyas, ug usa ka dako nga bahin sa pagka-access karon gikan sa plataporma mismo, dili gikan sa ad-hoc JavaScript. Wala kana magpasabut nga ang mga librarya sa tooltip dili na magamit tungod kay kini adunay kahulugan alang sa komplikado nga mga sistema sa disenyo, bug-at nga pag-customize, o mga pagpugong sa kabilin, apan ang default nabalhin. Sa unang higayon, ang pinakasimple nga tooltip mahimo usab nga labing husto. Kung nakuryoso ka, sulayi kini nga eksperimento: Ilisan lang ang usa ka tooltip sa imong produkto gamit ang Popover API, ayaw isulat pag-usab ang tanan, ayaw pagbalhin usa ka tibuuk nga sistema, ug pagpili lang usa ug tan-awa kung unsa ang nawala sa imong code. Kung ang plataporma naghatag kanimo og usa ka mas maayo nga primitive, ang kadaugan dili lang gamay nga linya sa JavaScript, apan kini gamay nga mga butang nga kinahanglan nimong kabalak-an. Tan-awa ang tibuok source code sa akong GitHub repo. Dugang nga Pagbasa Para sa mas lawom nga pag-dive ngadto sa mga popover ug may kalabutan nga mga API:
"Poppin' In", Geoff Graham "Pagklaro sa Relasyon Tali sa Popovers ug Dialogs", Zell Liew "Unsa ang popover=hint?", Una Kravets "Mga Sugo sa Invoker", Daniel Schwarz "Paghimo usa ka Auto-Closing Notification nga adunay HTML Popover", Preethi Ablihi ang UI Popover API Explainer "Pop(over) the Balloons", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
Nagtanyag usab ang MDN og komprehensibong teknikal nga dokumentasyon para sa Popover API.
