টুলটিপসমূহ আপুনি হ'ব পৰা আটাইতকৈ সৰু UI সমস্যাৰ দৰে অনুভৱ কৰে। সৰু সৰু আৰু সাধাৰণতে লুকাই থাকে৷ যেতিয়া কোনোবাই এটা কেনেকৈ নিৰ্মাণ কৰিব লাগে বুলি সুধিব, তেতিয়া পৰম্পৰাগত উত্তৰটো প্ৰায় সদায় কিছুমান জাভাস্ক্রিপ্ট লাইব্ৰেৰী ব্যৱহাৰ কৰি ঘূৰি আহে। আৰু বহুদিনলৈকে সেইটোৱেই আছিল যুক্তিসংগত পৰামৰ্শ। মইও অনুসৰণ কৰিলোঁ। উপৰিউক্তভাৱে এটা টুলটিপ সহজ। এটা উপাদানত হোভাৰ বা ফ'কাচ কৰক, কিছু লিখনীৰ সৈতে এটা সৰু বাকচ দেখুৱাওক, তাৰ পিছত ব্যৱহাৰকাৰী আঁতৰি গ'লে লুকুৱাওক। কিন্তু এবাৰ আপুনি এটা প্ৰকৃত ব্যৱহাৰকাৰীলৈ প্ৰেৰণ কৰিলে, প্ৰান্তবোৰ দেখুৱাবলৈ আৰম্ভ কৰে। কিবৰ্ড ব্যৱহাৰকাৰীসকলে ট্ৰিগাৰত টেব কৰক, কিন্তু সঁজুলিটিপ কেতিয়াও দেখা নাপাব। স্ক্ৰীণ ৰিডাৰে দুবাৰ ঘোষণা কৰে, বা একেবাৰেই নহয়। আপুনি মাউছটো অতি সোনকালে লৰচৰ কৰিলে সঁজুলিটিপটো টিপটিপিয়া হয়। ই সৰু পৰ্দাত বিষয়বস্তু ওভাৰলেপ কৰে। Esc টিপিলে ইয়াক বন্ধ নহয়। ফোকাচ হেৰাই যায়। সময়ৰ লগে লগে মোৰ টুলটিপ ক’ডটো বাঢ়ি আহিল আৰু মই সঁচাকৈয়ে মালিক হ’ব নিবিচৰা বস্তু এটালৈ পৰিণত হ’ল৷ ইভেণ্ট শ্ৰোতাসকলৰ স্তূপ হৈ পৰিল। হোভাৰ আৰু ফ’কাচ পৃথকে পৃথকে চম্ভালিব লাগিছিল। বাহিৰৰ ক্লিকবোৰৰ বাবে বিশেষ ক্ষেত্ৰৰ প্ৰয়োজন হৈছিল। ARIA বৈশিষ্ট্যসমূহ হাতেৰে ছিংক কৰি ৰাখিব লাগিছিল। প্ৰতিটো সৰু সৰু সমাধানে যুক্তিৰ আন এটা স্তৰ যোগ কৰিছিল। লাইব্ৰেৰীবোৰে সহায় কৰিছিল, কিন্তু সেইবোৰো পৰ্দাৰ আঁৰত কি হৈ আছে সম্পূৰ্ণৰূপে বুজি পোৱাৰ পৰিৱৰ্তে মই কাম কৰা ক’লা বাকচৰ দৰেই আছিল। সেইটোৱেই মোক নতুন পপ’ভাৰ এপিআইটো চাবলৈ ঠেলি দিছিল। মই চাব বিচাৰিছিলো যে যদি মই লাইব্ৰেৰীৰ সহায় অবিহনে ব্ৰাউজাৰৰ স্থানীয় মডেল ব্যৱহাৰ কৰি এটা টুলটিপ পুনৰ নিৰ্মাণ কৰো তেন্তে কি হ’ব। আমি আৰম্ভ কৰাৰ লগে লগে মন কৰিবলগীয়া যে, যিকোনো নতুন বৈশিষ্ট্যৰ দৰেই, ইয়াৰ লগত কিছুমান কথা আছে যিবোৰ এতিয়াও ইস্ত্ৰী কৰা হৈছে৷ এইখিনিতে ক'ব পাৰি যে, ই বৰ্তমান ব্ৰাউজাৰ সমৰ্থন লাভ কৰে, যদিও সামগ্ৰিক এপিআইৰ কেইবাটাও টুকুৰা আছে যিবোৰ প্ৰবাহিত হৈ আছে। ইয়াৰ মাজতে কেনিউজৰ ওপৰত চকু ৰখাটো যথেষ্ট৷ “পুৰণি” টুলটিপ Popover API ৰ আগতে, এটা টুলটিপ লাইব্ৰেৰী ব্যৱহাৰ কৰাটো এটা চৰ্টকাট নাছিল। ই ডিফল্ট আছিল। ব্ৰাউজাৰসমূহৰ এটা টুলটিপৰ স্থানীয় ধাৰণা নাছিল যিয়ে মাউছ, কিবৰ্ড, আৰু সহায়ক প্ৰযুক্তিৰ মাজেৰে কাম কৰিছিল। যদি আপুনি শুদ্ধতাৰ কথা চিন্তা কৰিছিল, তেন্তে আপোনাৰ একমাত্ৰ বিকল্প আছিল লাইব্ৰেৰী ব্যৱহাৰ কৰা, আৰু মই ঠিক সেইটোৱেই কৰিলোঁ। উচ্চ স্তৰত, আৰ্হি সদায় একে আছিল: এটা ট্ৰিগাৰ উপাদান, এটা লুকাই থকা সঁজুলি টিপ উপাদান, আৰু দুয়োটা সমন্বয় কৰিবলৈ জাভাস্ক্রিপ্ট।
লাইব্ৰেৰীয়ে তাঁৰ নিয়ন্ত্ৰণ কৰিছিল যি উপাদানটোক হোভাৰ বা ফ'কাচত দেখুৱাবলৈ, ব্লাৰ বা মাউছ এৰিলে লুকুৱাবলৈ, আৰু স্ক্ৰলত পুনৰ অৱস্থান/আকাৰ সলনি কৰিবলৈ অনুমতি দিছিল।
সময়ৰ লগে লগে টুলটিপটো ভংগুৰ হৈ পৰিব পাৰে। সৰু সৰু পৰিৱৰ্তনে বিপদ কঢ়িয়াই আনিছিল। সৰু সৰু সমাধানৰ ফলত ৰিগ্ৰেছন হৈছিল। ইয়াতকৈও বেয়া কথাটো হ’ল, নতুন সঁজুলি টিপ যোগ কৰিলেও একে জটিলতা উত্তৰাধিকাৰী সূত্ৰে পোৱা গৈছিল। কাৰিকৰীভাৱে কথাবোৰ কাম কৰিলে, কিন্তু কেতিয়াও নিষ্পত্তি বা সম্পূৰ্ণ অনুভৱ নহ’ল। ব্ৰাউজাৰৰ স্থানীয় পপ’ভাৰ এপিআই ব্যৱহাৰ কৰি টুলটিপটো পুনৰ নিৰ্মাণ কৰাৰ সিদ্ধান্ত লোৱাৰ সময়ত সেইটোৱেই আছিল। মই চেষ্টা কৰা মুহূৰ্তটো The Popover API নতুন কিবা এটাৰ সৈতে পৰীক্ষা-নিৰীক্ষা কৰিব বিচৰাৰ বাবে মই Popover API ব্যৱহাৰ কৰিবলৈ সলনি হোৱা নাছিলো। মই চুইচ কৰিলোঁ কাৰণ মই টুলটিপ আচৰণ বজাই ৰাখি ভাগৰি পৰিছিলো যিটো মই বিশ্বাস কৰিছিলো যে ব্ৰাউজাৰে ইতিমধ্যে বুজিব লাগিছিল। প্ৰথমতে মোৰ সন্দেহ হৈছিল। বেছিভাগ নতুন ৱেব API এ সৰলতাৰ প্ৰতিশ্ৰুতি দিয়ে, কিন্তু তথাপিও আঠা, প্ৰান্ত-কেছ নিয়ন্ত্ৰণ, বা ফ'লবেক লজিকৰ প্ৰয়োজন যি আপুনি পলায়ন কৰিবলৈ চেষ্টা কৰা একে জটিলতা নিৰৱে পুনৰ সৃষ্টি কৰে। গতিকে, মই সম্ভৱপৰ সৰু সৰু ধৰণেৰে Popover API টো চেষ্টা কৰিলোঁ। সেইটো কেনেকুৱা আছিল:
লৈ সংযোগ সৃষ্টি কৰে <বুটাম popovertarget="tip-1">?
1. কিবৰ্ড “মাত্ৰ কাম কৰে” কিবৰ্ড সমৰ্থন সঠিকভাৱে লাইন আপ কৰা একাধিক স্তৰৰ ওপৰত নিৰ্ভৰশীল আছিল: ফ'কাছে সঁজুলিটিপ ট্ৰিগাৰ কৰিব লাগিছিল, ব্লাৰে ইয়াক লুকুৱাব লাগিছিল, Esc হস্তচালিতভাৱে তাঁৰযুক্ত কৰিব লাগিছিল, আৰু সময় গুৰুত্বপূৰ্ণ আছিল। যদি আপুনি এটা প্ৰান্তৰ ক্ষেত্ৰ মিছ কৰে, সঁজুলিটিপ হয় বহুত সময় খোলা থাকিব বা ইয়াক পঢ়িব পৰাৰ আগতে অদৃশ্য হৈ যাব। popover বৈশিষ্ট্য অটো বা মেনুৱেল লে সংহতি কৰাৰ সৈতে, ব্ৰাউজাৰে মূল কথাসমূহ গ্ৰহণ কৰে: Tab আৰু Shift+Tab এ সাধাৰণভাৱে আচৰণ কৰে, Esc এ প্ৰতিবাৰেই সঁজুলি টিপ বন্ধ কৰে, আৰু কোনো অতিৰিক্ত শ্ৰোতাৰ প্ৰয়োজন নহয়।
মোৰ ক'ডবেছৰ পৰা যিটো নোহোৱা হৈছিল সেয়া আছিল গ্লোবেল কিডাউন হেণ্ডলাৰ, Esc-নিৰ্দিষ্ট ক্লিনআপ লজিক, আৰু কিবৰ্ড নেভিগেচনৰ সময়ত অৱস্থা পৰীক্ষা। কিবৰ্ডৰ অভিজ্ঞতাটো মোৰ ৰক্ষণাবেক্ষণ কৰিবলগীয়া বস্তু হোৱা বন্ধ হৈ গ’ল, আৰু ই ব্ৰাউজাৰৰ নিশ্চয়তা হৈ পৰিল। ২) স্ক্ৰীণৰিডাৰৰ ভৱিষ্যদ্বাণীযোগ্যতা এইটোৱেই আছিল...আটাইতকৈ ডাঙৰ উন্নতি। আনকি সাৱধানে ARIA কাম কৰিলেও আচৰণৰ ভিন্নতা আছিল, যিদৰে মই আগতে উল্লেখ কৰিছিলো। প্ৰতিটো সৰু সৰু পৰিৱৰ্তনে বিপদজনক অনুভৱ কৰিছিল। এটা সঠিক ভূমিকাৰে এটা পপ’ভাৰ ব্যৱহাৰ কৰাটো দেখাত আৰু অনুভৱত বহুত বেছি সুস্থিৰ আৰু ভৱিষ্যদ্বাণীযোগ্য যেতিয়ালৈকে কি হ’ব:
আৰু ইয়াত আন এটা জয়: চুইচৰ পিছত, লাইটহাউছে পাৰস্পৰিক ক্ৰিয়াৰ বাবে ভুল ARIA অৱস্থাৰ সতৰ্কবাণীসমূহ ফ্লেগ কৰা বন্ধ কৰি দিলে, মূলতঃ কাৰণ মোৰ বাবে ভুলবশতঃ ভুল হ’ব পৰাকৈ আৰু কাষ্টম ARIA অৱস্থা নাই৷
৩/ ফোকাচ মেনেজমেণ্ট আগতে ফ’কাচ ভংগুৰ আছিল। আগতে মোৰ এনে নিয়ম আছিল: ফ’কাচ ট্ৰিগাৰক টুলটিপ দেখুৱাবলৈ দিয়ক, ফ’কাচক টুলটিপলৈ লৈ যাওক আৰু বন্ধ নকৰিব, ট্ৰিগাৰটো অতি ওচৰত হ’লে ব্লাৰ কৰক, আৰু টুলটিপ বন্ধ কৰক আৰু ফ’কাচ নিজেই পুনৰুদ্ধাৰ কৰক৷ এইটোৱে কাম কৰিলে যেতিয়ালৈকে নহ’ল৷ Popover API ৰ সৈতে, ব্ৰাউজাৰে এটা সৰল মডেল বলবৎ কৰে য'ত ফ'কাচ অধিক স্বাভাৱিকভাৱে popover লৈ যাব পাৰে। পপ'ভাৰ বন্ধ কৰিলে ফ'কাচ ট্ৰিগাৰলৈ ঘূৰি আহে, আৰু কোনো অদৃশ্য ফ'কাচ ফান্দ বা হেৰুৱা ফ'কাচ মুহূৰ্ত নাথাকে। আৰু মই ফ’কাচ ৰিষ্ট’ৰেচন ক’ড যোগ কৰা নাছিলো; মই আঁতৰাই দিলোঁ।
উপসংহাৰ Popover API ৰ অৰ্থ হ'ল সঁজুলিটিপসমূহ আৰু আপুনি অনুকৰণ কৰা বস্তু নহয়। ব্ৰাউজাৰে বুজি পোৱা কথা৷ খোলা, বন্ধ কৰা, কিবৰ্ডৰ আচৰণ, এস্কেপ নিয়ন্ত্ৰণ, আৰু অভিগম্যতাৰ এটা ডাঙৰ অংশ এতিয়া প্লেটফৰ্মৰ পৰাই আহে, এড-হক জাভাস্ক্রিপ্টৰ পৰা নহয়। তাৰ অৰ্থ এইটো নহয় যে সঁজুলি টিপ লাইব্ৰেৰীসমূহ অচল কাৰণ সিহঁত এতিয়াও জটিল নকশা ব্যৱস্থাপ্ৰণালী, গধুৰ স্বনিৰ্বাচন, বা লিগেচি বাধাসমূহৰ বাবে যুক্তিযুক্ত, কিন্তু অবিকল্পিত স্থানান্তৰিত হৈছে। প্ৰথমবাৰৰ বাবে আটাইতকৈ সহজ টুলটিপটোও আটাইতকৈ শুদ্ধ হ’ব পাৰে। যদি আপুনি কৌতুহলী, এই পৰীক্ষাটো চেষ্টা কৰক: আপোনাৰ উৎপাদনত মাত্ৰ এটা সঁজুলি টিপক Popover API ৰ সৈতে সলনি কৰক, সকলো পুনৰ লিখিব নালাগে, এটা গোটেই ব্যৱস্থাপ্ৰণালী প্ৰব্ৰজন নকৰিব, আৰু মাত্ৰ এটা বাছক আৰু চাওক আপোনাৰ ক'ডৰ পৰা কি অদৃশ্য হয়। যেতিয়া প্লেটফৰ্মে আপোনাক এটা উন্নত প্ৰিমিটিভ দিয়ে, তেতিয়া জয় কেৱল জাভাস্ক্রিপ্টৰ কম শাৰী নহয়, কিন্তু ই কম কথাৰ বাবে আপুনি আচলতে চিন্তা কৰিবলগীয়া হয়। মোৰ GitHub ৰেপোত সম্পূৰ্ণ উৎস ক'ড চাওক। অধিক পঢ়া পপ'ভাৰসমূহ আৰু সম্পৰ্কীয় APIসমূহত গভীৰ ডুব যোৱাৰ বাবে:
“পপিন’ ইন”, জিঅফ গ্ৰেহাম “পোভাৰ আৰু সংলাপৰ মাজৰ সম্পৰ্ক স্পষ্ট কৰা”, জেল লিউ “পপ’ভাৰ=হিণ্ট কি?”, উনা ক্ৰাভেটছ “ইনভকাৰ কমাণ্ডছ”, ডেনিয়েল শ্ব’ৱাৰ্জ “এইচটিএমএল পপ’ভাৰৰ সৈতে এটা অটো-ক্লজিং জাননী সৃষ্টি কৰা”, প্ৰীতি UI Popover API ব্যাখ্যাকাৰী খোলক “পপ(অভাৰ) দ্য বেলুনছ”, জন ৰিয়া “চিএছএছ এংকৰ পজিচনিং”, জুয়ান ডিয়েগো ৰড্ৰিগেজ
MDN এ Popover API ৰ বাবে বিস্তৃত কাৰিকৰী নথিপত্ৰও প্ৰদান কৰে।
