टूलटिप तुम्हाला सर्वात लहान UI समस्या असल्यासारखे वाटते. ते लहान आणि सहसा लपलेले असतात. जेव्हा एखादी व्यक्ती कशी तयार करावी हे विचारते, तेव्हा पारंपारिक उत्तर जवळजवळ नेहमीच काही JavaScript लायब्ररी वापरून परत येते. आणि बऱ्याच काळापासून, हाच योग्य सल्ला होता. मी पण त्याचे पालन केले. पृष्ठभागावर, एक टूलटिप सोपे आहे. एखाद्या घटकावर फिरवा किंवा फोकस करा, काही मजकूरासह एक छोटा बॉक्स दाखवा, नंतर वापरकर्ता दूर गेल्यावर तो लपवा. पण एकदा तुम्ही खऱ्या वापरकर्त्यांना पाठवले की, कडा दिसायला लागतात. कीबोर्ड वापरकर्ते ट्रिगरमध्ये टॅब करतात, परंतु टूलटिप कधीही पाहू शकत नाहीत. स्क्रीन रीडर हे दोनदा घोषित करतात, किंवा अजिबात नाही. जेव्हा तुम्ही माऊस खूप लवकर हलवता तेव्हा टूलटिप चमकते. हे लहान स्क्रीनवरील सामग्री ओव्हरलॅप करते. Esc दाबल्याने ते बंद होत नाही. फोकस हरवतो. कालांतराने, माझा टूलटिप कोड अशा गोष्टीत वाढला ज्याची मला आता मालकी नको होती. कार्यक्रम श्रोत्यांनी जमा केले. होवर आणि फोकस स्वतंत्रपणे हाताळावे लागले. बाहेरील क्लिकसाठी विशेष प्रकरणे आवश्यक आहेत. ARIA विशेषता हाताने समक्रमित ठेवल्या पाहिजेत. प्रत्येक लहान निराकरणाने तर्कशास्त्राचा आणखी एक स्तर जोडला. लायब्ररींनी मदत केली, परंतु ते पडद्यामागे काय घडत आहे हे पूर्णपणे समजून घेण्याऐवजी मी काम केलेल्या ब्लॅक बॉक्ससारखे होते. हेच मला नवीन Popover API पाहण्यास प्रवृत्त केले. मी लायब्ररीच्या मदतीशिवाय ब्राउझरचे मूळ मॉडेल वापरून एकल टूलटिप पुन्हा तयार केल्यास काय होईल हे मला पहायचे होते. आम्ही सुरू केल्यावर, हे लक्षात घेण्यासारखे आहे की, कोणत्याही नवीन वैशिष्ट्याप्रमाणे, त्यात काही गोष्टी आहेत ज्या अजूनही इस्त्री केल्या जात आहेत. असे म्हटले आहे की, सध्या त्याला उत्तम ब्राउझर सपोर्ट मिळतो, जरी एकूण API चे अनेक तुकडे फ्लक्समध्ये आहेत. यादरम्यान कॅनियुसवर लक्ष ठेवणे योग्य आहे. "जुनी" टूलटिप Popover API पूर्वी, टूलटिप लायब्ररी वापरणे हा शॉर्टकट नव्हता. ते डीफॉल्ट होते. ब्राउझरकडे टूलटिपची मूळ संकल्पना नव्हती जी माउस, कीबोर्ड आणि सहाय्यक तंत्रज्ञानावर कार्य करते. जर तुम्हाला अचूकतेची काळजी असेल, तर तुमचा एकमेव पर्याय होता लायब्ररी वापरणे, आणि मी तेच केले. उच्च स्तरावर, नमुना नेहमी सारखाच असतो: ट्रिगर घटक, लपविलेले टूलटिप घटक आणि दोन समन्वय साधण्यासाठी JavaScript.
लायब्ररीने वायरिंग हाताळले ज्यामुळे घटक होवर किंवा फोकसवर दर्शविले, ब्लर किंवा माउस लीव्हवर लपवा आणि स्क्रोलवर पुनर्स्थित/आकार बदलला.
कालांतराने, टूलटिप नाजूक होऊ शकते. छोट्या बदलांमुळे धोका असतो. किरकोळ सुधारणांमुळे प्रतिगमन झाले. वाईट म्हणजे, नवीन टूलटिप जोडण्याने समान जटिलता वारशाने मिळाली. गोष्टी तांत्रिकदृष्ट्या कार्य करतात, परंतु कधीही स्थिर किंवा पूर्ण वाटले नाही. जेव्हा मी ब्राउझरचे मूळ पॉपओव्हर API वापरून टूलटिप पुन्हा तयार करण्याचा निर्णय घेतला तेव्हा हीच परिस्थिती होती. मी Popover API चा प्रयत्न केलेला क्षण मी Popover API वापरण्यासाठी स्विच केले नाही कारण मला काहीतरी नवीन प्रयोग करायचे होते. मी स्विच केले कारण मी टूलटिप वर्तन राखण्यात कंटाळलो होतो जे ब्राउझरला आधीच समजले असावे. मी सुरुवातीला साशंक होतो. बऱ्याच नवीन वेब APIs साधेपणाचे वचन देतात, परंतु तरीही त्यांना गोंद, एज-केस हाताळणी किंवा फॉलबॅक लॉजिकची आवश्यकता असते जी शांतपणे तीच जटिलता पुन्हा तयार करते जी तुम्ही सुटण्याचा प्रयत्न करत आहात. म्हणून, मी शक्य तितक्या लहान मार्गाने Popover API चा प्रयत्न केला. ते असे दिसले ते येथे आहे:
शी कनेक्शन तयार करते
1. कीबोर्ड "फक्त काम करतो" कीबोर्ड समर्थन अनेक स्तरांवर योग्यरित्या अस्तरावर अवलंबून होते: फोकसने टूलटिप ट्रिगर करणे आवश्यक होते, अस्पष्टतेने ते लपवावे लागले, Esc स्वहस्ते वायर्ड करावे लागले आणि वेळेला महत्त्व दिले गेले. तुम्ही एज केस चुकवल्यास, टूलटिप एकतर खूप वेळ उघडी राहील किंवा ती वाचण्यापूर्वी गायब होईल. स्वयं किंवा मॅन्युअल वर सेट केलेल्या पॉपओव्हर विशेषतासह, ब्राउझर मूलभूत गोष्टी घेते: Tab आणि Shift+Tab सामान्यपणे वागतात, Esc प्रत्येक वेळी टूलटिप बंद करते आणि अतिरिक्त श्रोत्यांची आवश्यकता नसते.
माझ्या कोडबेसमधून जे गायब झाले ते म्हणजे ग्लोबल कीडाउन हँडलर, Esc-विशिष्ट क्लीनअप लॉजिक आणि कीबोर्ड नेव्हिगेशन दरम्यान स्टेट चेक. कीबोर्डचा अनुभव मला कायम ठेवायचा होता आणि तो ब्राउझरची हमी बनला. 2. स्क्रीनरीडर प्रेडिक्टेबिलिटी हे होतेसर्वात मोठी सुधारणा. एआरआयएच्या काळजीपूर्वक काम करूनही, मी आधी सांगितल्याप्रमाणे वागणूक बदलते. प्रत्येक छोटासा बदल धोकादायक वाटला. योग्य भूमिकेसह पॉपओव्हर वापरणे जे घडणार आहे त्यापेक्षा बरेच अधिक स्थिर आणि अंदाज करण्यासारखे दिसते आणि वाटते:
आणि येथे आणखी एक विजय आहे: स्विच केल्यानंतर, लाइटहाऊसने परस्परसंवादासाठी चुकीच्या ARIA राज्य चेतावणींना ध्वजांकित करणे थांबवले, मुख्यत्वे कारण माझ्यासाठी चुकून चूक होण्यासाठी सानुकूल ARIA राज्ये नाहीत.
3. फोकस व्यवस्थापन फोकस नाजूक असायचा. याआधी, माझ्याकडे असे नियम होते: फोकस ट्रिगरला टूलटिप दाखवू द्या, टूलटिपमध्ये फोकस हलवू द्या आणि बंद करू नका, ट्रिगर खूप जवळ असेल तेव्हा ब्लर करा आणि टूलटिप बंद करा आणि फोकस मॅन्युअली रिस्टोअर करा. असे होईपर्यंत हे काम केले. Popover API सह, ब्राउझर सोपे मॉडेल लागू करतो जेथे फोकस अधिक नैसर्गिकरित्या पॉपओव्हरमध्ये जाऊ शकतो. पॉपओव्हर बंद केल्याने फोकस ट्रिगरवर परत येतो आणि कोणतेही अदृश्य फोकस ट्रॅप किंवा गमावलेले फोकस क्षण नाहीत. आणि मी फोकस रिस्टोरेशन कोड जोडला नाही; मी ते काढले.
निष्कर्ष Popover API चा अर्थ असा आहे की टूलटिप यापुढे तुम्ही अनुकरण करत आहात. ते ब्राउझरला समजते. उघडणे, बंद करणे, कीबोर्ड वर्तन, एस्केप हाताळणी आणि प्रवेशयोग्यतेचा मोठा भाग आता प्लॅटफॉर्मवरूनच येतो, ॲड-हॉक JavaScript वरून नाही. याचा अर्थ असा नाही की टूलटिप लायब्ररी अप्रचलित आहेत कारण ते अजूनही जटिल डिझाइन सिस्टम, हेवी कस्टमायझेशन किंवा लेगसी मर्यादांसाठी अर्थपूर्ण आहेत, परंतु डीफॉल्ट बदलले आहे. प्रथमच, सर्वात सोपी टूलटिप देखील सर्वात योग्य असू शकते. तुम्ही उत्सुक असल्यास, हा प्रयोग करून पहा: Popover API सह तुमच्या उत्पादनातील फक्त एक टूलटिप बदला, सर्वकाही पुन्हा लिहू नका, संपूर्ण सिस्टम स्थलांतरित करू नका आणि फक्त एक निवडा आणि तुमच्या कोडमधून काय गायब होते ते पहा. जेव्हा प्लॅटफॉर्म तुम्हाला एक चांगले आदिम देते, तेव्हा जिंकणे म्हणजे JavaScript च्या काही कमी ओळी नसून, तुम्हाला अजिबात काळजी करण्यासारख्या कमी गोष्टी आहेत. माझ्या GitHub रेपोमध्ये संपूर्ण स्त्रोत कोड पहा. पुढील वाचन popovers आणि संबंधित API मध्ये खोलवर जाण्यासाठी:
"पॉपिन इन", ज्योफ ग्रॅहम "पॉपओव्हर्स आणि डायलॉग्समधील संबंध स्पष्ट करणे", झेल लिव “पॉपओव्हर=इशारा म्हणजे काय?”, उना क्रॅवेट्स "इनव्होकर कमांड्स", डॅनियल श्वार्झ "एचटीएमएल पॉपओव्हरसह ऑटो-क्लोजिंग नोटिफिकेशन तयार करणे", प्रीथी UI Popover API Explainer उघडा "पॉप(ओव्हर) द बलून", जॉन रिया "CSS अँकर पोझिशनिंग", जुआन दिएगो रॉड्रिग्ज
MDN Popover API साठी सर्वसमावेशक तांत्रिक दस्तऐवजीकरण देखील ऑफर करते.
