ટૂલટિપ્સ તમને સૌથી નાની UI સમસ્યા જેવી લાગે છે. તેઓ નાના અને સામાન્ય રીતે છુપાયેલા હોય છે. જ્યારે કોઈ પૂછે છે કે તેને કેવી રીતે બનાવવું, પરંપરાગત જવાબ લગભગ હંમેશા કેટલીક JavaScript લાઇબ્રેરીનો ઉપયોગ કરીને પાછો આવે છે. અને લાંબા સમય સુધી, તે સમજદાર સલાહ હતી. મેં પણ તેને અનુસર્યું. સપાટી પર, એક ટૂલટીપ સરળ છે. કોઈ તત્વ પર હોવર કરો અથવા ફોકસ કરો, અમુક ટેક્સ્ટ સાથે નાનું બોક્સ બતાવો, પછી જ્યારે વપરાશકર્તા દૂર જાય ત્યારે તેને છુપાવો. પરંતુ એકવાર તમે વાસ્તવિક વપરાશકર્તાઓને મોકલો, કિનારીઓ દેખાવાનું શરૂ કરે છે. કીબોર્ડ વપરાશકર્તાઓ ટ્રિગરમાં ટેબ કરે છે, પરંતુ ટૂલટિપ ક્યારેય જોતા નથી. સ્ક્રીન રીડર્સ તેની બે વાર જાહેરાત કરે છે, અથવા બિલકુલ નહીં. જ્યારે તમે માઉસને ખૂબ ઝડપથી ખસેડો છો ત્યારે ટૂલટિપ ફ્લિકર થાય છે. તે નાની સ્ક્રીન પર સામગ્રીને ઓવરલેપ કરે છે. Esc દબાવવાથી તે બંધ થતું નથી. ધ્યાન ખોવાઈ જાય છે. સમય જતાં, મારો ટૂલટિપ કોડ એવી વસ્તુમાં વિકસ્યો જેની માલિકી હું ખરેખર હવે ધરાવવા માંગતો નથી. પ્રસંગ શ્રોતાઓ ઉમટી પડ્યા. હોવર અને ફોકસને અલગથી હેન્ડલ કરવું પડ્યું. બહારની ક્લિક માટે ખાસ કેસની જરૂર છે. ARIA વિશેષતાઓને હાથથી સુમેળમાં રાખવાની હતી. દરેક નાના સુધારાએ તર્કનું બીજું સ્તર ઉમેર્યું. લાઈબ્રેરીઓએ મદદ કરી, પરંતુ તેઓ પડદા પાછળ શું થઈ રહ્યું છે તે સંપૂર્ણ રીતે સમજવાને બદલે બ્લેક બોક્સ જેવા હતા જેની આસપાસ મેં કામ કર્યું હતું. તે જ હતું જેણે મને નવા પોપઓવર API જોવા માટે દબાણ કર્યું. જો હું લાઇબ્રેરીની સહાય વિના બ્રાઉઝરના મૂળ મોડલનો ઉપયોગ કરીને એક જ ટૂલટિપને ફરીથી બનાવું તો શું થશે તે હું જોવા માંગતો હતો. જેમ જેમ આપણે પ્રારંભ કરીએ છીએ, તે નોંધવું યોગ્ય છે કે, કોઈપણ નવી સુવિધાની જેમ, તેની સાથે પણ કેટલીક વસ્તુઓ છે જે હજી પણ બહાર કાઢવામાં આવી રહી છે. તેણે કહ્યું, તે હાલમાં મહાન બ્રાઉઝર સપોર્ટનો આનંદ માણે છે, જો કે એકંદર API માં ઘણા ટુકડાઓ છે જે પ્રવાહમાં છે. તે દરમિયાન કેનિયુસ પર નજર રાખવા યોગ્ય છે. "જૂની" ટૂલટિપ Popover API પહેલાં, ટૂલટિપ લાઇબ્રેરીનો ઉપયોગ એ શોર્ટકટ ન હતો. તે મૂળભૂત હતું. બ્રાઉઝર્સમાં માઉસ, કીબોર્ડ અને સહાયક ટેક્નોલોજી પર કામ કરતી ટૂલટિપનો મૂળ ખ્યાલ નહોતો. જો તમે ચોકસાઈની કાળજી લેતા હો, તો તમારો એકમાત્ર વિકલ્પ પુસ્તકાલયનો ઉપયોગ કરવાનો હતો, અને મેં તે જ કર્યું. ઉચ્ચ સ્તરે, પેટર્ન હંમેશા સમાન રહેતી હતી: એક ટ્રિગર એલિમેન્ટ, એક છુપાયેલ ટૂલટિપ એલિમેન્ટ, અને JavaScript બેનું સંકલન કરવા માટે.
લાઇબ્રેરીએ વાયરિંગને હેન્ડલ કર્યું કે જેનાથી એલિમેન્ટને હોવર અથવા ફોકસ પર બતાવવા, બ્લર અથવા માઉસ લીવ પર છુપાવવા અને સ્ક્રોલ પર રિપોઝિશન/રિસાઈઝ કરવાની મંજૂરી મળી.
સમય જતાં, ટૂલટીપ નાજુક બની શકે છે. નાના ફેરફારો જોખમ વહન કરે છે. નાના સુધારાઓ રીગ્રેસનનું કારણ બને છે. ખરાબ, નવી ટૂલટિપ્સ ઉમેરવાથી સમાન જટિલતા વારસામાં મળી. વસ્તુઓ તકનીકી રીતે કામ કરે છે, પરંતુ ક્યારેય સ્થાયી અથવા સંપૂર્ણ લાગ્યું નથી. જ્યારે મેં બ્રાઉઝરના મૂળ પોપઓવર API નો ઉપયોગ કરીને ટૂલટિપને ફરીથી બનાવવાનું નક્કી કર્યું ત્યારે તે વસ્તુઓની સ્થિતિ હતી. આ ક્ષણ મેં પોપઓવર API નો પ્રયાસ કર્યો હું Popover API નો ઉપયોગ કરવા માટે સ્વિચ કર્યો નથી કારણ કે હું કંઈક નવું સાથે પ્રયોગ કરવા માંગતો હતો. મેં સ્વિચ કર્યું કારણ કે હું ટૂલટિપ વર્તણૂક જાળવવાથી કંટાળી ગયો હતો જે મને લાગે છે કે બ્રાઉઝર પહેલાથી જ સમજી ગયો હોવો જોઈએ. હું શરૂઆતમાં શંકાસ્પદ હતો. મોટા ભાગના નવા વેબ API એ સરળતાનું વચન આપે છે, પરંતુ હજુ પણ ગુંદર, એજ-કેસ હેન્ડલિંગ અથવા ફોલબેક લોજિકની જરૂર છે જે શાંતિથી એ જ જટિલતાને ફરીથી બનાવે છે જેમાંથી તમે છટકી જવાનો પ્રયાસ કરી રહ્યા હતા. તેથી, મેં શક્ય તેટલી નાની રીતે પોપઓવર API નો પ્રયાસ કર્યો. તે આના જેવું દેખાતું હતું તે અહીં છે:
સાથે જોડાણ બનાવે છે
તરીકે મેનેજ કરે છે
1. કીબોર્ડ “ફક્ત કામ કરે છે” કીબોર્ડ સપોર્ટ બહુવિધ સ્તરો યોગ્ય રીતે લાઇન અપ પર આધારિત છે: ફોકસને ટૂલટિપને ટ્રિગર કરવું પડ્યું, અસ્પષ્ટતાએ તેને છુપાવવું પડ્યું, Escને મેન્યુઅલી વાયર કરવું પડ્યું, અને સમય મહત્વપૂર્ણ છે. જો તમે એક ધારનો કેસ ચૂકી ગયા છો, તો ટૂલટિપ કાં તો ખૂબ લાંબી ખુલ્લી રહેશે અથવા વાંચી શકાય તે પહેલાં અદૃશ્ય થઈ જશે. પોપઓવર એટ્રિબ્યુટ ઓટો અથવા મેન્યુઅલ પર સેટ કરવામાં આવે છે, બ્રાઉઝર મૂળભૂત બાબતોને લે છે: Tab અને Shift+Tab સામાન્ય રીતે વર્તે છે, Esc દર વખતે ટૂલટિપ બંધ કરે છે, અને કોઈ વધારાના શ્રોતાઓની જરૂર નથી.
મારા કોડબેઝમાંથી જે અદૃશ્ય થઈ ગયું તે વૈશ્વિક કીડાઉન હેન્ડલર્સ, Esc-વિશિષ્ટ ક્લિનઅપ લોજિક અને કીબોર્ડ નેવિગેશન દરમિયાન સ્ટેટ ચેક્સ હતા. કીબોર્ડ અનુભવ એ કંઈક બનવાનું બંધ થઈ ગયું જે મારે જાળવવાનું હતું, અને તે બ્રાઉઝર ગેરંટી બની ગયું. 2. સ્ક્રીનરીડર અનુમાનિતતા આ હતીસૌથી મોટો સુધારો. સાવચેતીપૂર્વક ARIA કાર્ય સાથે પણ, વર્તન બદલાય છે, જેમ કે મેં અગાઉ દર્શાવેલ છે. દરેક નાના ફેરફાર જોખમી લાગ્યું. યોગ્ય ભૂમિકા સાથે પોપઓવરનો ઉપયોગ કરવાથી જે થવાનું છે ત્યાં સુધી ઘણું સ્થિર અને અનુમાનિત લાગે છે અને લાગે છે:
અને અહીં બીજી જીત છે: સ્વિચ કર્યા પછી, લાઇટહાઉસે ક્રિયાપ્રતિક્રિયા માટે ખોટી ARIA રાજ્ય ચેતવણીઓને ફ્લેગ કરવાનું બંધ કરી દીધું, મોટે ભાગે કારણ કે મારા માટે આકસ્મિક રીતે ખોટું થવા માટે હવે કસ્ટમ ARIA સ્ટેટ્સ નથી.
3. ફોકસ મેનેજમેન્ટ ફોકસ નાજુક હતું. પહેલાં, મારી પાસે નિયમો હતા જેમ કે: ફોકસ ટ્રિગરને ટૂલટિપ બતાવવા દો, ફોકસને ટૂલટિપમાં ખસેડો અને બંધ ન કરો, ટ્રિગર ખૂબ નજીક હોય ત્યારે બ્લર કરો અને ટૂલટિપ બંધ કરો અને મેન્યુઅલી ફોકસ રિસ્ટોર કરો. જ્યાં સુધી તે ન થયું ત્યાં સુધી આ કામ કર્યું. પોપઓવર API સાથે, બ્રાઉઝર એક સરળ મોડલ લાગુ કરે છે જ્યાં ફોકસ વધુ કુદરતી રીતે પોપઓવરમાં જઈ શકે છે. પોપઓવર બંધ કરવાથી ટ્રિગર પર ફોકસ પરત આવે છે, અને ત્યાં કોઈ અદ્રશ્ય ફોકસ ટ્રેપ્સ અથવા ફોકસની ક્ષણો ગુમાવી નથી. અને મેં ફોકસ રિસ્ટોરેશન કોડ ઉમેર્યો નથી; મેં તેને દૂર કર્યો.
નિષ્કર્ષ Popover API નો અર્થ એ છે કે ટૂલટિપ્સ હવે એવી કોઈ વસ્તુ નથી જે તમે અનુકરણ કરો છો. તે કંઈક છે જે બ્રાઉઝર સમજે છે. ઓપનિંગ, ક્લોઝિંગ, કીબોર્ડ બિહેવિયર, એસ્કેપ હેન્ડલિંગ અને એક્સેસિબિલિટીનો મોટો હિસ્સો હવે પ્લેટફોર્મ પરથી જ આવે છે, એડ-હોક JavaScriptમાંથી નહીં. તેનો અર્થ એ નથી કે ટૂલટિપ લાઇબ્રેરીઓ અપ્રચલિત છે કારણ કે તે હજી પણ જટિલ ડિઝાઇન સિસ્ટમ્સ, ભારે કસ્ટમાઇઝેશન અથવા લેગસી અવરોધો માટે અર્થપૂર્ણ છે, પરંતુ ડિફોલ્ટ બદલાઈ ગયું છે. પ્રથમ વખત, સૌથી સરળ ટૂલટિપ પણ સૌથી સાચી હોઈ શકે છે. જો તમે ઉત્સુક છો, તો આ પ્રયોગ અજમાવી જુઓ: તમારા ઉત્પાદનમાં ફક્ત એક જ ટૂલટિપને Popover API સાથે બદલો, બધું ફરીથી લખશો નહીં, સમગ્ર સિસ્ટમને સ્થાનાંતરિત કરશો નહીં અને ફક્ત એક પસંદ કરો અને જુઓ કે તમારા કોડમાંથી શું અદૃશ્ય થઈ જાય છે. જ્યારે પ્લેટફોર્મ તમને વધુ સારું આદિમ આપે છે, ત્યારે જીત એ JavaScriptની માત્ર ઓછી લાઇન નથી, પરંતુ તે ઓછી વસ્તુઓ છે જેના વિશે તમારે ચિંતા કરવાની જરૂર છે. મારા GitHub રેપોમાં સંપૂર્ણ સ્રોત કોડ તપાસો. વધુ વાંચન પોપોવર્સ અને સંબંધિત API માં ઊંડાણપૂર્વક ડાઇવ માટે:
"પોપિન' ઇન", જ્યોફ ગ્રેહામ "પોપોવર્સ અને ડાયલોગ્સ વચ્ચેના સંબંધની સ્પષ્ટતા", ઝેલ લિવ "પોપઓવર = સંકેત શું છે?", ઉના ક્રેવેટ્સ "ઇન્વોકર કમાન્ડ્સ", ડેનિયલ શ્વાર્ઝ "એચટીએમએલ પોપઓવર સાથે ઓટો-ક્લોઝિંગ નોટિફિકેશન બનાવવું", પ્રીતિ UI Popover API Explainer ખોલો “પૉપ(ઓવર) ધ બલૂન્સ”, જ્હોન રિયા "CSS એન્કર પોઝિશનિંગ", જુઆન ડિએગો રોડ્રિગ્ઝ
MDN પોપઓવર API માટે વ્યાપક તકનીકી દસ્તાવેજીકરણ પણ પ્રદાન કરે છે.
