टूलटिप्स आपको सबसे छोटी यूआई समस्या लगती है। वे छोटे होते हैं और आमतौर पर छिपे होते हैं। जब कोई पूछता है कि इसे कैसे बनाया जाए, तो पारंपरिक उत्तर लगभग हमेशा कुछ जावास्क्रिप्ट लाइब्रेरी का उपयोग करके वापस आता है। और लंबे समय तक, यही समझदारी भरी सलाह थी। मैंने भी इसका पालन किया. सतह पर, टूलटिप सरल है। किसी तत्व पर होवर करें या फ़ोकस करें, कुछ टेक्स्ट वाला एक छोटा बॉक्स दिखाएं, फिर जब उपयोगकर्ता दूर चला जाए तो उसे छिपा दें। लेकिन एक बार जब आप वास्तविक उपयोगकर्ताओं को भेज देते हैं, तो किनारे दिखाई देने लगते हैं। कीबोर्ड उपयोगकर्ता ट्रिगर में टैब करते हैं, लेकिन टूलटिप कभी नहीं देखते हैं। स्क्रीन रीडर इसकी घोषणा दो बार करते हैं, या बिल्कुल नहीं करते। जब आप माउस को बहुत तेज़ी से घुमाते हैं तो टूलटिप फ़्लिकर करता है। यह छोटी स्क्रीन पर सामग्री को ओवरलैप करता है। Esc दबाने से यह बंद नहीं होता। फोकस खो जाता है. समय के साथ, मेरा टूलटिप कोड एक ऐसी चीज़ में बदल गया जिसे मैं वास्तव में अब और नहीं रखना चाहता था। कार्यक्रम सुनने वालों का हुजूम उमड़ पड़ा। होवर और फ़ोकस को अलग-अलग संभालना पड़ता था। बाहरी क्लिकों के लिए विशेष मामलों की आवश्यकता होती है। ARIA विशेषताओं को हाथ से समन्वयित रखना पड़ता था। हर छोटे सुधार ने तर्क की एक और परत जोड़ दी। पुस्तकालयों ने मदद की, लेकिन पर्दे के पीछे क्या हो रहा था, इसे पूरी तरह से समझने के बजाय वे ब्लैक बॉक्स की तरह थे, जिन पर मैंने काम किया। इसी ने मुझे नए पॉपओवर एपीआई को देखने के लिए प्रेरित किया। मैं देखना चाहता था कि अगर मैं लाइब्रेरी की सहायता के बिना ब्राउज़र के मूल मॉडल का उपयोग करके एक टूलटिप को फिर से बनाऊं तो क्या होगा। जैसे ही हम शुरू करते हैं, यह ध्यान देने योग्य है कि, किसी भी नई सुविधा की तरह, इसमें कुछ चीजें हैं जिन्हें अभी भी ठीक किया जा रहा है। जैसा कि कहा गया है, वर्तमान में इसे शानदार ब्राउज़र समर्थन प्राप्त है, हालाँकि समग्र एपीआई में कई टुकड़े हैं जो प्रवाह में हैं। इस बीच कैनियूज़ पर नज़र रखना उचित है। "पुराना" टूलटिप पॉपओवर एपीआई से पहले, टूलटिप लाइब्रेरी का उपयोग करना कोई शॉर्टकट नहीं था। यह डिफ़ॉल्ट था. ब्राउज़रों के पास टूलटिप की कोई मूल अवधारणा नहीं थी जो माउस, कीबोर्ड और सहायक तकनीक पर काम करती हो। यदि आप शुद्धता की परवाह करते हैं, तो आपका एकमात्र विकल्प लाइब्रेरी का उपयोग करना था, और मैंने बिल्कुल यही किया। उच्च स्तर पर, पैटर्न हमेशा एक जैसा होता था: एक ट्रिगर तत्व, एक छिपा हुआ टूलटिप तत्व और दोनों को समन्वयित करने के लिए जावास्क्रिप्ट।
<बटन वर्ग='जानकारी'>?
लाइब्रेरी ने वायरिंग को संभाला जो तत्व को होवर या फोकस पर दिखाने, ब्लर या माउस लीव पर छिपाने और स्क्रॉल पर रिपोजिशन/आकार बदलने की अनुमति देता है।
समय के साथ, टूलटिप नाजुक हो सकता है। छोटे बदलावों में जोखिम होता था। मामूली सुधारों के कारण प्रतिगमन हुआ। इससे भी बदतर, नए टूलटिप्स जोड़ने से वही जटिलता विरासत में मिली। चीजें तकनीकी रूप से काम कर गईं, लेकिन कभी व्यवस्थित या पूर्ण महसूस नहीं हुईं। यही स्थिति थी जब मैंने ब्राउज़र के मूल पॉपओवर एपीआई का उपयोग करके टूलटिप को फिर से बनाने का निर्णय लिया। जिस क्षण मैंने पॉपओवर एपीआई का प्रयास किया मैंने पॉपओवर एपीआई का उपयोग करना बंद नहीं किया क्योंकि मैं कुछ नया प्रयोग करना चाहता था। मैंने स्विच किया क्योंकि मैं टूलटिप व्यवहार को बनाए रखने से थक गया था, मेरा मानना था कि ब्राउज़र को पहले ही समझ जाना चाहिए था। पहले तो मुझे संदेह हुआ. अधिकांश नए वेब एपीआई सरलता का वादा करते हैं, लेकिन फिर भी गोंद, एज-केस हैंडलिंग या फ़ॉलबैक लॉजिक की आवश्यकता होती है जो चुपचाप उसी जटिलता को फिर से बनाता है जिससे आप बचने की कोशिश कर रहे थे। इसलिए, मैंने पॉपओवर एपीआई को सबसे छोटे तरीके से आज़माया। वह इस प्रकार दिखता था:
से कनेक्शन बनाता है <बटन पॉपओवरटार्गेट='टिप-1'>?
के रूप में प्रबंधित करता है
1. कीबोर्ड "बस काम करता है" कीबोर्ड का समर्थन कई परतों के सही ढंग से अस्तर पर निर्भर था: फोकस को टूलटिप को ट्रिगर करना था, ब्लर को इसे छिपाना था, ईएससी को मैन्युअल रूप से वायर्ड करना था, और समय मायने रखता था। यदि आप एक किनारे का मामला भूल गए हैं, तो टूलटिप या तो बहुत देर तक खुला रहेगा या पढ़ने से पहले ही गायब हो जाएगा। पॉपओवर विशेषता को ऑटो या मैन्युअल पर सेट करने के साथ, ब्राउज़र मूल बातें ले लेता है: टैब और शिफ्ट+टैब सामान्य रूप से व्यवहार करते हैं, Esc हर बार टूलटिप को बंद कर देता है, और किसी अतिरिक्त श्रोता की आवश्यकता नहीं होती है।
मेरे कोडबेस से वैश्विक कीडाउन हैंडलर, ईएससी-विशिष्ट क्लीनअप लॉजिक और कीबोर्ड नेविगेशन के दौरान स्थिति की जांच गायब हो गई। कीबोर्ड अनुभव कुछ ऐसा नहीं रहा जिसे मुझे बनाए रखना था, और यह ब्राउज़र की गारंटी बन गया। 2. स्क्रीनरीडर पूर्वानुमेयता ये थासबसे बड़ा सुधार. सावधानीपूर्वक ARIA कार्य करने पर भी, व्यवहार भिन्न-भिन्न था, जैसा कि मैंने पहले बताया था। हर छोटा परिवर्तन जोखिम भरा लगता था। एक उचित भूमिका के साथ पॉपओवर का उपयोग करना अधिक स्थिर और पूर्वानुमानित दिखता है और महसूस होता है कि क्या होने वाला है:
और यहां एक और जीत है: स्विच के बाद, लाइटहाउस ने इंटरैक्शन के लिए गलत एआरआईए राज्य चेतावनियों को फ़्लैग करना बंद कर दिया, मुख्यतः क्योंकि अब कोई कस्टम एआरआईए राज्य नहीं है जिससे मैं गलती से गलत हो जाऊं।
3. फोकस प्रबंधन फोकस नाजुक हुआ करता था. पहले, मेरे पास ऐसे नियम थे: फोकस ट्रिगर को टूलटिप दिखाने दें, फोकस को टूलटिप में ले जाएं और बंद न करें, जब यह बहुत करीब हो तो ट्रिगर को धुंधला कर दें, और टूलटिप को बंद करें और फोकस को मैन्युअल रूप से पुनर्स्थापित करें। यह तब तक काम करता रहा जब तक ऐसा नहीं हुआ। पॉपओवर एपीआई के साथ, ब्राउज़र एक सरल मॉडल लागू करता है जहां फोकस अधिक स्वाभाविक रूप से पॉपओवर में जा सकता है। पॉपओवर को बंद करने से फोकस ट्रिगर पर लौट आता है, और कोई अदृश्य फोकस ट्रैप या खोए हुए फोकस क्षण नहीं होते हैं। और मैंने फोकस पुनर्स्थापना कोड नहीं जोड़ा; मैंने इसे हटा दिया.
निष्कर्ष पॉपओवर एपीआई का मतलब है कि टूलटिप्स अब आपके द्वारा अनुकरण की जाने वाली चीज़ नहीं हैं। वे कुछ ऐसी चीजें हैं जिन्हें ब्राउज़र समझता है। खोलना, बंद करना, कीबोर्ड व्यवहार, एस्केप हैंडलिंग, और पहुंच का एक बड़ा हिस्सा अब प्लेटफ़ॉर्म से ही आता है, न कि तदर्थ जावास्क्रिप्ट से। इसका मतलब यह नहीं है कि टूलटिप लाइब्रेरीज़ अप्रचलित हैं क्योंकि वे अभी भी जटिल डिज़ाइन सिस्टम, भारी अनुकूलन, या विरासत बाधाओं के लिए समझ में आते हैं, लेकिन डिफ़ॉल्ट स्थानांतरित हो गया है। पहली बार, सबसे सरल टूलटिप भी सबसे सही हो सकता है। यदि आप उत्सुक हैं, तो इस प्रयोग को आज़माएँ: बस अपने उत्पाद में केवल एक टूलटिप को पॉपओवर एपीआई से बदलें, सब कुछ फिर से न लिखें, पूरे सिस्टम को माइग्रेट न करें, और बस एक चुनें और देखें कि आपके कोड से क्या गायब हो जाता है। जब प्लेटफ़ॉर्म आपको एक बेहतर आदिम देता है, तो जीत केवल जावास्क्रिप्ट की कम पंक्तियों की नहीं होती है, बल्कि कम चीज़ों की होती है जिनके बारे में आपको बिल्कुल भी चिंता करने की ज़रूरत नहीं होती है। मेरे GitHub रेपो में पूर्ण स्रोत कोड देखें। आगे पढ़ना पॉपओवर और संबंधित एपीआई के बारे में गहराई से जानने के लिए:
"पॉपिन' इन", ज्योफ ग्राहम "पॉपओवर और डायलॉग्स के बीच संबंध को स्पष्ट करना", ज़ेल ल्यू "पॉपओवर=संकेत क्या है?", ऊना क्रैवेट्स "इनवोकर कमांड्स", डैनियल श्वार्ज़ "HTML पॉपओवर के साथ एक ऑटो-क्लोजिंग अधिसूचना बनाना", प्रीती यूआई पॉपओवर एपीआई व्याख्याकार खोलें "पॉप(ओवर) द बैलून", जॉन रिया "सीएसएस एंकर पोजिशनिंग", जुआन डिएगो रोड्रिग्ज
एमडीएन पॉपओवर एपीआई के लिए व्यापक तकनीकी दस्तावेज़ीकरण भी प्रदान करता है।
