டூல்டிப்ஸ் உங்களுக்கு இருக்கக்கூடிய மிகச் சிறிய UI பிரச்சனையாக உணர்கிறது. அவை சிறியவை மற்றும் பொதுவாக மறைக்கப்படுகின்றன. ஒருவரை எப்படி உருவாக்குவது என்று யாராவது கேட்டால், சில ஜாவாஸ்கிரிப்ட் லைப்ரரியைப் பயன்படுத்தி பாரம்பரிய பதில் எப்போதும் வரும். மற்றும் நீண்ட காலமாக, அது விவேகமான ஆலோசனையாக இருந்தது. நானும் அதை பின்பற்றினேன். மேற்பரப்பில், ஒரு உதவிக்குறிப்பு எளிது. ஒரு உறுப்பு மீது வட்டமிடவும் அல்லது கவனம் செலுத்தவும், சில உரையுடன் ஒரு சிறிய பெட்டியைக் காட்டவும், பின்னர் பயனர் விலகிச் செல்லும்போது அதை மறைக்கவும். ஆனால் உண்மையான பயனர்களுக்கு ஒன்றை அனுப்பியவுடன், விளிம்புகள் காட்டத் தொடங்கும். விசைப்பலகை பயனர்கள் தூண்டுதலில் தாவல், ஆனால் உதவிக்குறிப்பைப் பார்க்க வேண்டாம். ஸ்க்ரீன் ரீடர்கள் அதை இரண்டு முறை அறிவிக்கிறார்கள் அல்லது இல்லை. நீங்கள் மவுஸை மிக விரைவாக நகர்த்தும்போது உதவிக்குறிப்பு மினுமினுக்கிறது. இது சிறிய திரைகளில் உள்ளடக்கத்தை ஒன்றுடன் ஒன்று சேர்க்கிறது. Esc ஐ அழுத்தினால் அதை மூட முடியாது. கவனம் இழக்கப்படுகிறது. காலப்போக்கில், எனது உதவிக்குறிப்பு குறியீடு இனி சொந்தமாக விரும்பாத ஒன்றாக வளர்ந்தது. நிகழ்ச்சி கேட்போர் குவிந்தனர். படல் மற்றும் கவனம் தனித்தனியாக கையாளப்பட வேண்டும். வெளிப்புற கிளிக்குகளுக்கு சிறப்பு வழக்குகள் தேவை. ARIA பண்புக்கூறுகள் கையால் ஒத்திசைக்கப்பட வேண்டும். ஒவ்வொரு சிறிய திருத்தமும் தர்க்கத்தின் மற்றொரு அடுக்கைச் சேர்த்தது. நூலகங்கள் உதவியது, ஆனால் அவை திரைக்குப் பின்னால் என்ன நடக்கிறது என்பதை முழுமையாகப் புரிந்துகொள்வதற்குப் பதிலாக நான் வேலை செய்த கருப்புப் பெட்டிகளைப் போலவே இருந்தன. அதுதான் புதிய Popover APIஐப் பார்க்க என்னைத் தூண்டியது. நூலகத்தின் உதவியின்றி உலாவியின் நேட்டிவ் மாடலைப் பயன்படுத்தி ஒற்றை உதவிக்குறிப்பை மீண்டும் உருவாக்கினால் என்ன நடக்கும் என்று பார்க்க விரும்பினேன். நாங்கள் தொடங்கும்போது, எந்தவொரு புதிய அம்சத்தையும் போலவே, அதில் சில விஷயங்கள் இன்னும் சலவை செய்யப்படுகின்றன என்பது கவனிக்கத்தக்கது. ஒட்டுமொத்த ஏபிஐக்கு பல துண்டுகள் ஃப்ளக்ஸில் இருந்தாலும், இது தற்போது சிறந்த உலாவி ஆதரவைப் பெறுகிறது. இதற்கிடையில் Caniuse மீது ஒரு கண் வைத்திருப்பது மதிப்பு. "பழைய" உதவிக்குறிப்பு Popover APIக்கு முன், டூல்டிப் லைப்ரரியைப் பயன்படுத்துவது குறுக்குவழி அல்ல. இது இயல்புநிலையாக இருந்தது. சுட்டி, விசைப்பலகை மற்றும் உதவித் தொழில்நுட்பம் முழுவதும் வேலை செய்யும் டூல்டிப்பின் சொந்த கருத்து உலாவிகளில் இல்லை. நீங்கள் சரியாகப் பற்றி அக்கறை கொண்டிருந்தால், நூலகத்தைப் பயன்படுத்துவதே உங்களின் ஒரே விருப்பம், அதைத்தான் நான் செய்தேன். உயர் மட்டத்தில், முறை எப்போதும் ஒரே மாதிரியாக இருக்கும்: தூண்டுதல் உறுப்பு, மறைக்கப்பட்ட உதவிக்குறிப்பு உறுப்பு மற்றும் இரண்டையும் ஒருங்கிணைக்க JavaScript.
லைப்ரரி வயரிங் கையாண்டது, இது உறுப்பை மிதவை அல்லது ஃபோகஸில் காட்டவும், மங்கலான அல்லது மவுஸ் விடுப்பில் மறைக்கவும், ஸ்க்ரோலில் இடமாற்றம்/அளவை மாற்றவும் அனுமதிக்கும்.
காலப்போக்கில், உதவிக்குறிப்பு உடையக்கூடியதாக மாறும். சிறிய மாற்றங்கள் ஆபத்தை ஏற்படுத்தியது. சிறிய திருத்தங்கள் பின்னடைவை ஏற்படுத்தியது. மோசமானது, புதிய உதவிக்குறிப்புகளைச் சேர்ப்பது அதே சிக்கலானது. விஷயங்கள் தொழில்நுட்ப ரீதியாக வேலை செய்தன, ஆனால் ஒருபோதும் தீர்வு அல்லது முழுமையானதாக உணரவில்லை. உலாவியின் நேட்டிவ் பாப்ஓவர் ஏபிஐயைப் பயன்படுத்தி உதவிக்குறிப்பை மீண்டும் உருவாக்க முடிவு செய்தபோது அதுதான் நிலை. நான் Popover API ஐ முயற்சித்த தருணம் புதிதாக ஏதாவது பரிசோதனை செய்ய விரும்பியதால், Popover API ஐப் பயன்படுத்துவதற்கு நான் மாறவில்லை. உலாவி ஏற்கனவே புரிந்துகொண்டிருக்க வேண்டும் என்று நான் நம்பும் டூல்டிப் நடத்தையை பராமரிப்பதில் சோர்வாக இருந்ததால் மாறினேன். எனக்கு முதலில் சந்தேகமாக இருந்தது. பெரும்பாலான புதிய வலை APIகள் எளிமையை உறுதியளிக்கின்றன, ஆனால் இன்னும் பசை, விளிம்பு-கேஸ் கையாளுதல் அல்லது நீங்கள் தப்பிக்க முயற்சித்த அதே சிக்கலை அமைதியாக மீண்டும் உருவாக்கும் லாஜிக் தேவைப்படுகிறது. எனவே, நான் Popover API ஐ முடிந்தவரை சிறிய முறையில் முயற்சித்தேன். அது எப்படி இருந்தது என்பது இங்கே:
க்கான இணைப்பை popovertarget உருவாக்குகிறது
1. விசைப்பலகை "வெறும் வேலை செய்கிறது" விசைப்பலகை ஆதரவு பல அடுக்குகள் சரியாக வரிசைப்படுத்தப்படுவதைப் பொறுத்தது: ஃபோகஸ் உதவிக்குறிப்பைத் தூண்ட வேண்டும், மங்கலானது அதை மறைக்க வேண்டும், Esc கைமுறையாக வயர் செய்யப்பட வேண்டும், மற்றும் நேரம் முக்கியமானது. நீங்கள் ஒரு விளிம்பு வழக்கைத் தவறவிட்டால், உதவிக்குறிப்பு நீண்ட நேரம் திறந்திருக்கும் அல்லது அதைப் படிக்கும் முன் மறைந்துவிடும். பாப்ஓவர் பண்புக்கூறு தானியங்கு அல்லது கைமுறையாக அமைக்கப்பட்டால், உலாவி அடிப்படைகளை எடுத்துக்கொள்கிறது: Tab மற்றும் Shift+Tab பொதுவாக செயல்படும், Esc ஒவ்வொரு முறையும் உதவிக்குறிப்பை மூடுகிறது, மேலும் கூடுதல் கேட்பவர்கள் தேவையில்லை.
எனது கோட்பேஸிலிருந்து காணாமல் போனது உலகளாவிய கீ டவுன் ஹேண்ட்லர்கள், Esc-குறிப்பிட்ட கிளீனப் லாஜிக் மற்றும் விசைப்பலகை வழிசெலுத்தலின் போது மாநில சோதனைகள். விசைப்பலகை அனுபவம் நான் பராமரிக்க வேண்டிய ஒன்றாக நிறுத்தப்பட்டது, அது உலாவி உத்தரவாதமாக மாறியது. 2. ஸ்கிரீன் ரீடர் முன்கணிப்பு இது இருந்ததுமிகப்பெரிய முன்னேற்றம். கவனமாக ARIA வேலை செய்தாலும், நான் முன்பு குறிப்பிட்டது போல, நடத்தை வேறுபட்டது. ஒவ்வொரு சிறிய மாற்றமும் அபாயகரமானதாக உணரப்பட்டது. சரியான பாத்திரத்துடன் பாப்ஓவரைப் பயன்படுத்துவது என்ன நடக்கப் போகிறது என்பதைப் பொறுத்த வரையில் மிகவும் நிலையானதாகவும் கணிக்கக்கூடியதாகவும் தோன்றுகிறது:
இதோ மற்றொரு வெற்றி: ஸ்விட்ச் செய்த பிறகு, லைட்ஹவுஸ் தொடர்புக்கான தவறான ARIA நிலை எச்சரிக்கைகளைக் கொடியிடுவதை நிறுத்தியது, ஏனெனில் தற்செயலாக தவறாகப் போவதற்கான தனிப்பயன் ARIA நிலைகள் இல்லை.
3. கவனம் மேலாண்மை கவனம் பலவீனமாக இருந்தது. இதற்கு முன், என்னிடம் இது போன்ற விதிகள் இருந்தன: ஃபோகஸ் ட்ரிகர் டூல்டிப்பைக் காட்டட்டும், ஃபோகஸை டூல்டிப்பில் நகர்த்தி மூட வேண்டாம், மிக அருகில் இருக்கும்போது தூண்டுதலை மங்கலாக்கி, டூல்டிப்பை மூடிவிட்டு ஃபோகஸை கைமுறையாக மீட்டெடுக்கலாம். இது செயல்படாத வரை வேலை செய்தது. Popover API உடன், உலாவியானது ஒரு எளிய மாதிரியை செயல்படுத்துகிறது, அங்கு கவனம் இயற்கையாகவே பாப்ஓவரில் செல்ல முடியும். பாப்ஓவரை மூடுவது தூண்டுதலுக்கு கவனம் செலுத்துகிறது, மேலும் கண்ணுக்குத் தெரியாத ஃபோகஸ் ட்ராப்கள் அல்லது இழந்த ஃபோகஸ் தருணங்கள் எதுவும் இல்லை. மேலும் நான் ஃபோகஸ் ரெஸ்டோரேஷன் குறியீட்டைச் சேர்க்கவில்லை; நான் அதை அகற்றினேன்.
முடிவுரை Popover API என்பது டூல்டிப்கள் இனி நீங்கள் உருவகப்படுத்துவது அல்ல. அவை உலாவி புரிந்துகொள்ளும் ஒன்று. திறப்பது, மூடுவது, விசைப்பலகை நடத்தை, எஸ்கேப் கையாளுதல் மற்றும் அணுகல்தன்மையின் ஒரு பெரிய பகுதி இப்போது இயங்குதளத்தில் இருந்தே வருகிறது, தற்காலிக ஜாவாஸ்கிரிப்ட்டிலிருந்து அல்ல. டூல்டிப் லைப்ரரிகள் வழக்கற்றுப் போய்விட்டன என்று அர்த்தம் இல்லை, ஏனெனில் அவை இன்னும் சிக்கலான வடிவமைப்பு அமைப்புகள், கனமான தனிப்பயனாக்கம் அல்லது மரபுக் கட்டுப்பாடுகள் ஆகியவற்றிற்கு அர்த்தமுள்ளதாக இருக்கின்றன, ஆனால் இயல்புநிலை மாறிவிட்டது. முதல் முறையாக, எளிமையான உதவிக்குறிப்பு மிகவும் சரியானதாக இருக்கலாம். நீங்கள் ஆர்வமாக இருந்தால், இந்த பரிசோதனையை முயற்சிக்கவும்: உங்கள் தயாரிப்பில் உள்ள ஒரு உதவிக்குறிப்பை Popover API உடன் மாற்றவும், எல்லாவற்றையும் மீண்டும் எழுத வேண்டாம், முழு கணினியையும் நகர்த்த வேண்டாம், மேலும் ஒன்றைத் தேர்ந்தெடுத்து உங்கள் குறியீட்டில் இருந்து மறைவதைப் பார்க்கவும். இயங்குதளம் உங்களுக்கு ஒரு சிறந்த பழமையானதைக் கொடுக்கும் போது, வெற்றி என்பது ஜாவாஸ்கிரிப்ட்டின் குறைவான வரிகள் மட்டுமல்ல, நீங்கள் கவலைப்பட வேண்டிய விஷயங்கள் குறைவு. எனது கிட்ஹப் ரெப்போவில் முழு மூலக் குறியீட்டைப் பார்க்கவும். மேலும் படித்தல் பாபோவர்ஸ் மற்றும் தொடர்புடைய API களில் ஆழமாக மூழ்குவதற்கு:
"பாப்பின் இன்", ஜெஃப் கிரஹாம் "பாபோவர்ஸ் மற்றும் டயலாக்ஸுக்கு இடையேயான உறவை தெளிவுபடுத்துதல்", ஜெல் லீவ் "பாபோவர்=குறிப்பு என்றால் என்ன?", உனா கிராவெட்ஸ் "இன்வோக்கர் கட்டளைகள்", டேனியல் ஸ்வார்ஸ் "ஒரு HTML Popover மூலம் ஒரு தானாக மூடும் அறிவிப்பை உருவாக்குதல்", ப்ரீத்தி UI Popover API விளக்கியைத் திறக்கவும் "பாப்(ஓவர்) தி பலூன்கள்", ஜான் ரியா "CSS ஆங்கர் பொசிஷனிங்", ஜுவான் டியாகோ ரோட்ரிக்ஸ்
MDN ஆனது Popover APIக்கான விரிவான தொழில்நுட்ப ஆவணங்களையும் வழங்குகிறது.
