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