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