టూల్టిప్లు మీకు ఉన్న అతి చిన్న UI సమస్యగా భావిస్తున్నాయి. అవి చిన్నవి మరియు సాధారణంగా దాచబడతాయి. ఒకదాన్ని ఎలా నిర్మించాలని ఎవరైనా అడిగినప్పుడు, సాంప్రదాయక సమాధానం దాదాపు ఎల్లప్పుడూ కొన్ని JavaScript లైబ్రరీని ఉపయోగించి తిరిగి వస్తుంది. మరియు చాలా కాలం వరకు, ఇది సరైన సలహా. నేను కూడా దానిని అనుసరించాను. ఉపరితలంపై, టూల్టిప్ సులభం. ఒక మూలకంపై హోవర్ చేయండి లేదా ఫోకస్ చేయండి, కొంత వచనంతో చిన్న పెట్టెను చూపండి, ఆపై వినియోగదారు దూరంగా వెళ్లినప్పుడు దాన్ని దాచండి. కానీ మీరు ఒకదాన్ని నిజమైన వినియోగదారులకు పంపిన తర్వాత, అంచులు కనిపించడం ప్రారంభిస్తాయి. కీబోర్డ్ వినియోగదారులు ట్రిగ్గర్లోకి ట్యాబ్ చేయండి, కానీ టూల్టిప్ను ఎప్పటికీ చూడకండి. స్క్రీన్ రీడర్లు దీన్ని రెండుసార్లు ప్రకటిస్తారు లేదా అస్సలు కాదు. మీరు మౌస్ని చాలా త్వరగా కదిలించినప్పుడు టూల్టిప్ ఫ్లికర్స్ అవుతుంది. ఇది చిన్న స్క్రీన్లలో కంటెంట్ను అతివ్యాప్తి చేస్తుంది. Esc నొక్కితే అది మూసివేయబడదు. దృష్టి పోతుంది. కాలక్రమేణా, నా టూల్టిప్ కోడ్ నేను ఇకపై స్వంతం చేసుకోవాలనుకోలేదు. ఈవెంట్ శ్రోతలు పోగయ్యారు. హోవర్ మరియు ఫోకస్ విడివిడిగా నిర్వహించాలి. బయటి క్లిక్లకు ప్రత్యేక సందర్భాలు అవసరం. ARIA అట్రిబ్యూట్లను చేతితో సింక్లో ఉంచాలి. ప్రతి చిన్న పరిష్కారం తర్కం యొక్క మరొక పొరను జోడించింది. లైబ్రరీలు సహాయపడ్డాయి, కానీ అవి కూడా నేను తెర వెనుక ఏమి జరుగుతుందో పూర్తిగా అర్థం చేసుకోవడానికి బదులుగా నేను పనిచేసిన బ్లాక్ బాక్స్ల లాంటివి. అదే నన్ను కొత్త Popover APIని చూసేలా చేసింది. నేను లైబ్రరీ సహాయం లేకుండా బ్రౌజర్ యొక్క స్థానిక మోడల్ని ఉపయోగించి ఒకే టూల్టిప్ను పునర్నిర్మిస్తే ఏమి జరుగుతుందో చూడాలనుకున్నాను. మేము ప్రారంభించినప్పుడు, ఏదైనా కొత్త ఫీచర్తో పాటు, దానితో కొన్ని విషయాలు ఇప్పటికీ ఇనుమడింపబడుతున్నాయని గమనించాలి. మొత్తం APIకి ఫ్లక్స్లో అనేక ముక్కలు ఉన్నప్పటికీ, ఇది ప్రస్తుతం గొప్ప బ్రౌజర్ మద్దతును పొందుతోంది. ఈ సమయంలో కానియుస్పై నిఘా ఉంచడం విలువ. "పాత" ఉపకరణ చిట్కా Popover APIకి ముందు, టూల్టిప్ లైబ్రరీని ఉపయోగించడం సత్వరమార్గం కాదు. ఇది డిఫాల్ట్. మౌస్, కీబోర్డ్ మరియు సహాయక సాంకేతికత అంతటా పనిచేసే టూల్టిప్ యొక్క స్థానిక భావన బ్రౌజర్లకు లేదు. మీరు ఖచ్చితత్వం గురించి శ్రద్ధ వహిస్తే, మీ ఏకైక ఎంపిక లైబ్రరీని ఉపయోగించడం మరియు నేను చేసినది అదే. అధిక స్థాయిలో, నమూనా ఎల్లప్పుడూ ఒకే విధంగా ఉంటుంది: ట్రిగ్గర్ మూలకం, దాచిన టూల్టిప్ మూలకం మరియు రెండింటిని సమన్వయం చేయడానికి JavaScript.
లైబ్రరీ వైరింగ్ను నిర్వహించింది, ఇది మూలకాన్ని హోవర్ లేదా ఫోకస్లో చూపడానికి, బ్లర్ లేదా మౌస్ లీవ్లో దాచడానికి మరియు స్క్రోల్లో రీపోజిషన్/రీసైజ్ చేయడానికి అనుమతిస్తుంది.
కాలక్రమేణా, టూల్టిప్ పెళుసుగా మారవచ్చు. చిన్న మార్పులు ప్రమాదాన్ని కలిగి ఉన్నాయి. చిన్న పరిష్కారాలు తిరోగమనాలకు కారణమయ్యాయి. అధ్వాన్నంగా, కొత్త టూల్టిప్లను జోడించడం అదే సంక్లిష్టతను వారసత్వంగా పొందింది. విషయాలు సాంకేతికంగా పనిచేశాయి, కానీ ఎప్పుడూ స్థిరపడినట్లు లేదా పూర్తి కాలేదు. బ్రౌజర్ యొక్క స్థానిక Popover APIని ఉపయోగించి టూల్టిప్ను పునర్నిర్మించాలని నేను నిర్ణయించుకున్నప్పుడు అది పరిస్థితి. నేను Popover APIని ప్రయత్నించిన క్షణం నేను కొత్త దానితో ప్రయోగాలు చేయాలనుకున్నందున నేను Popover APIని ఉపయోగించలేదు. నేను బ్రౌజర్ ఇప్పటికే అర్థం చేసుకున్నట్లు భావించే టూల్టిప్ ప్రవర్తనను నిర్వహించడంలో విసిగిపోయినందున నేను మారాను. నాకు మొదట సందేహం కలిగింది. చాలా కొత్త వెబ్ APIలు సరళతను వాగ్దానం చేస్తాయి, కానీ ఇప్పటికీ గ్లూ, ఎడ్జ్-కేస్ హ్యాండ్లింగ్ లేదా ఫాల్బ్యాక్ లాజిక్ అవసరం, అది మీరు తప్పించుకోవడానికి ప్రయత్నిస్తున్న అదే సంక్లిష్టతను నిశ్శబ్దంగా పునఃసృష్టిస్తుంది. కాబట్టి, నేను Popover APIని వీలైనంత చిన్న మార్గంలో ప్రయత్నించాను. అది ఎలా ఉందో ఇక్కడ ఉంది:
కి కనెక్షన్ని సృష్టిస్తుంది <బటన్ popovertarget="tip-1">?
1. కీబోర్డ్ “జస్ట్ వర్క్స్” కీబోర్డ్ సపోర్ట్ సరిగ్గా వరుసలో ఉన్న బహుళ లేయర్లపై ఆధారపడి ఉంటుంది: ఫోకస్ టూల్టిప్ను ట్రిగ్గర్ చేయాలి, బ్లర్ దానిని దాచాలి, Esc మాన్యువల్గా వైర్ చేయాలి మరియు సమయం ముఖ్యం. మీరు ఒక ఎడ్జ్ కేస్ను కోల్పోయినట్లయితే, టూల్టిప్ చాలా సేపు తెరిచి ఉంటుంది లేదా చదవడానికి ముందే అదృశ్యమవుతుంది. పాప్ఓవర్ అట్రిబ్యూట్ ఆటో లేదా మాన్యువల్కి సెట్ చేయడంతో, బ్రౌజర్ ప్రాథమిక అంశాలను తీసుకుంటుంది: Tab మరియు Shift+Tab సాధారణంగా ప్రవర్తిస్తాయి, Esc ప్రతిసారీ టూల్టిప్ను మూసివేస్తుంది మరియు అదనపు శ్రోతలు అవసరం లేదు.
నా కోడ్బేస్ నుండి అదృశ్యమైనవి గ్లోబల్ కీడౌన్ హ్యాండ్లర్లు, Esc-నిర్దిష్ట క్లీనప్ లాజిక్ మరియు కీబోర్డ్ నావిగేషన్ సమయంలో స్టేట్ చెక్లు. నేను నిర్వహించాల్సిన కీబోర్డ్ అనుభవం ఆగిపోయింది మరియు అది బ్రౌజర్ హామీగా మారింది. 2. స్క్రీన్ రీడర్ ప్రిడిక్టబిలిటీ ఇది ఉందిఅతిపెద్ద అభివృద్ధి. జాగ్రత్తగా ARIA పని చేసినప్పటికీ, నేను ఇంతకు ముందు చెప్పినట్లుగా ప్రవర్తన మారుతూ ఉంటుంది. ప్రతి చిన్న మార్పు ప్రమాదకరమని భావించారు. సరైన పాత్రతో పాప్ఓవర్ని ఉపయోగించడం వలన ఏమి జరగబోతోందో చాలా స్థిరంగా మరియు ఊహించదగినదిగా కనిపిస్తుంది మరియు అనిపిస్తుంది:
మరియు ఇక్కడ మరొక విజయం ఉంది: స్విచ్ తర్వాత, లైట్హౌస్ పరస్పర చర్య కోసం తప్పు ARIA స్థితి హెచ్చరికలను ఫ్లాగ్ చేయడాన్ని ఆపివేసింది, ఎందుకంటే నేను అనుకోకుండా తప్పుగా భావించే కస్టమ్ ARIA స్టేట్లు లేవు.
3. ఫోకస్ మేనేజ్మెంట్ దృష్టి పెళుసుగా ఉండేది. ఇంతకు ముందు, నాకు ఇలాంటి నియమాలు ఉన్నాయి: ఫోకస్ ట్రిగ్గర్ను టూల్టిప్ని చూపించనివ్వండి, ఫోకస్ని టూల్టిప్లోకి తరలించండి మరియు మూసివేయవద్దు, చాలా దగ్గరగా ఉన్నప్పుడు ట్రిగ్గర్ను బ్లర్ చేయండి మరియు టూల్టిప్ను మూసివేసి ఫోకస్ని మాన్యువల్గా రీస్టోర్ చేయండి. ఇది చేయని వరకు ఇది పని చేసింది. Popover APIతో, బ్రౌజర్ సరళమైన మోడల్ను అమలు చేస్తుంది, ఇక్కడ దృష్టి మరింత సహజంగా పాప్ఓవర్లోకి వెళ్లవచ్చు. పాప్ఓవర్ను మూసివేయడం వలన ట్రిగ్గర్కు ఫోకస్ వస్తుంది మరియు కనిపించని ఫోకస్ ట్రాప్లు లేదా కోల్పోయిన ఫోకస్ మూమెంట్లు లేవు. మరియు నేను ఫోకస్ పునరుద్ధరణ కోడ్ని జోడించలేదు; నేను దానిని తొలగించాను.
తీర్మానం Popover API అంటే టూల్టిప్లు మీరు అనుకరించేవి కావు. అవి బ్రౌజర్కు అర్థమయ్యేవి. తెరవడం, మూసివేయడం, కీబోర్డ్ ప్రవర్తన, ఎస్కేప్ హ్యాండ్లింగ్ మరియు యాక్సెసిబిలిటీ యొక్క పెద్ద భాగం ఇప్పుడు ప్లాట్ఫారమ్ నుండి వచ్చింది, తాత్కాలిక జావాస్క్రిప్ట్ నుండి కాదు. టూల్టిప్ లైబ్రరీలు వాడుకలో లేవని అర్థం కాదు, ఎందుకంటే అవి సంక్లిష్టమైన డిజైన్ సిస్టమ్లు, భారీ అనుకూలీకరణ లేదా లెగసీ పరిమితుల కోసం ఇప్పటికీ అర్థవంతంగా ఉంటాయి, కానీ డిఫాల్ట్ మార్చబడింది. మొదటి సారి, సరళమైన టూల్టిప్ కూడా చాలా సరైనది కావచ్చు. మీకు ఆసక్తి ఉన్నట్లయితే, ఈ ప్రయోగాన్ని ప్రయత్నించండి: Popover APIతో మీ ఉత్పత్తిలో కేవలం ఒక టూల్టిప్ను భర్తీ చేయండి, అన్నింటినీ తిరిగి వ్రాయవద్దు, మొత్తం సిస్టమ్ను తరలించవద్దు మరియు ఒకదాన్ని ఎంచుకుని, మీ కోడ్ నుండి ఏమి కనిపించకుండా పోతుందో చూడండి. ప్లాట్ఫారమ్ మీకు మెరుగైన ప్రాచీనతను అందించినప్పుడు, విజయం అనేది కేవలం జావాస్క్రిప్ట్ యొక్క తక్కువ పంక్తులు మాత్రమే కాదు, కానీ మీరు చింతించవలసిన తక్కువ విషయాల గురించి. నా GitHub రెపోలో పూర్తి సోర్స్ కోడ్ని చూడండి. తదుపరి పఠనం పాప్ఓవర్లు మరియు సంబంధిత APIలలో లోతైన డైవ్ల కోసం:
"పాపిన్ ఇన్", జియోఫ్ గ్రాహం "పాపవర్స్ మరియు డైలాగ్ల మధ్య సంబంధాన్ని స్పష్టం చేయడం", జెల్ లైవ్ “పాపవర్=సూచన అంటే ఏమిటి?”, ఉనా క్రావెట్స్ "ఇన్వోకర్ కమాండ్స్", డేనియల్ స్క్వార్జ్ “HTML పాప్ఓవర్తో ఆటో-క్లోజింగ్ నోటిఫికేషన్ను క్రియేట్ చేస్తోంది”, ప్రీతి UI Popover API ఎక్స్ప్లెయినర్ని తెరవండి “పాప్(ఓవర్) ది బెలూన్స్”, జాన్ రియా "CSS యాంకర్ పొజిషనింగ్", జువాన్ డియెగో రోడ్రిగ్జ్
MDN Popover API కోసం సమగ్ర సాంకేతిక డాక్యుమెంటేషన్ను కూడా అందిస్తుంది.
