টুলটিপগুলি আপনার হতে পারে এমন ক্ষুদ্রতম UI সমস্যার মতো মনে হয়। তারা ছোট এবং সাধারণত লুকানো হয়। যখন কেউ জিজ্ঞাসা করে কিভাবে একটি তৈরি করতে হয়, ঐতিহ্যগত উত্তর প্রায় সবসময় কিছু জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে ফিরে আসে। এবং একটি দীর্ঘ সময়ের জন্য, যে বুদ্ধিমান পরামর্শ ছিল. আমি খুব, এটা অনুসরণ. পৃষ্ঠে, একটি টুলটিপ সহজ। হোভার করুন বা একটি উপাদানের উপর ফোকাস করুন, কিছু পাঠ্য সহ একটি ছোট বাক্স দেখান, তারপর ব্যবহারকারী সরে গেলে এটি লুকান। কিন্তু একবার আপনি একজনকে প্রকৃত ব্যবহারকারীদের কাছে পাঠালে, প্রান্তগুলি দেখাতে শুরু করে। কীবোর্ড ব্যবহারকারীরা ট্রিগারে ট্যাব করেন, কিন্তু টুলটিপ দেখতে পান না। স্ক্রিন রিডাররা এটি দুবার ঘোষণা করে, বা একেবারেই না। আপনি যখন খুব দ্রুত মাউস সরান তখন টুলটিপ ঝাঁকুনি দেয়। এটি ছোট স্ক্রিনে কন্টেন্ট ওভারল্যাপ করে। Esc চাপলে এটি বন্ধ হয় না। ফোকাস হারিয়ে যায়। সময়ের সাথে সাথে, আমার টুলটিপ কোড এমন কিছুতে পরিণত হয়েছে যা আমি সত্যিই আর মালিক হতে চাইনি। অনুষ্ঠান শ্রোতাদের স্তূপ। হোভার এবং ফোকাস আলাদাভাবে পরিচালনা করতে হয়েছিল। বাইরের ক্লিকের জন্য বিশেষ ক্ষেত্রে প্রয়োজন। ARIA অ্যাট্রিবিউটগুলিকে হাত দিয়ে সিঙ্কে রাখতে হয়েছিল৷ প্রতিটি ছোট সংশোধন যুক্তির আরেকটি স্তর যোগ করেছে। লাইব্রেরিগুলি সাহায্য করেছিল, তবে সেগুলিও ব্ল্যাক বক্সের মতো ছিল যা আমি পর্দার পিছনে কী ঘটছে তা পুরোপুরি বোঝার পরিবর্তে চারপাশে কাজ করেছি। এটাই আমাকে নতুন পপওভার এপিআই দেখতে ধাক্কা দিয়েছিল। আমি দেখতে চেয়েছিলাম যদি আমি একটি লাইব্রেরির সাহায্য ছাড়াই ব্রাউজারের নেটিভ মডেল ব্যবহার করে একটি একক টুলটিপ পুনর্নির্মাণ করি তাহলে কী ঘটবে। আমরা শুরু করার সাথে সাথে, এটি লক্ষণীয় যে, যে কোনও নতুন বৈশিষ্ট্যের মতো, এর সাথে কিছু জিনিস রয়েছে যা এখনও ইস্ত্রি করা হচ্ছে। এটি বলেছে, এটি বর্তমানে দুর্দান্ত ব্রাউজার সমর্থন উপভোগ করে, যদিও সামগ্রিক API এর বেশ কয়েকটি অংশ রয়েছে যা প্রবাহে রয়েছে। এর মধ্যে ক্যানিউসের দিকে নজর রাখা মূল্যবান। "পুরাতন" টুলটিপ Popover API এর আগে, একটি টুলটিপ লাইব্রেরি ব্যবহার করা একটি শর্টকাট ছিল না। এটা ডিফল্ট ছিল. মাউস, কীবোর্ড এবং সহায়ক প্রযুক্তি জুড়ে কাজ করে এমন একটি টুলটিপের একটি নেটিভ ধারণা ব্রাউজারে নেই। আপনি যদি সঠিকতার বিষয়ে যত্নবান হন তবে আপনার একমাত্র বিকল্প ছিল একটি লাইব্রেরি ব্যবহার করা, এবং আমি ঠিক এটিই করেছি। একটি উচ্চ স্তরে, প্যাটার্ন সবসময় একই ছিল: একটি ট্রিগার উপাদান, একটি লুকানো টুলটিপ উপাদান, এবং জাভাস্ক্রিপ্ট দুটিকে সমন্বয় করতে।
লাইব্রেরি ওয়্যারিং পরিচালনা করে যা উপাদানটিকে হোভার বা ফোকাসে দেখাতে, অস্পষ্ট বা মাউস ত্যাগে লুকাতে এবং স্ক্রলে পুনঃস্থাপন/আকার পরিবর্তন করতে দেয়।
সময়ের সাথে সাথে, টুলটিপ ভঙ্গুর হতে পারে। ছোট পরিবর্তন ঝুঁকি বহন করে. ছোটখাট সংশোধনের ফলে রিগ্রেশন হয়েছে। আরও খারাপ, নতুন টুলটিপ যোগ করা একই জটিলতা উত্তরাধিকারসূত্রে পেয়েছে। জিনিসগুলি প্রযুক্তিগতভাবে কাজ করেছিল, কিন্তু কখনই স্থির বা সম্পূর্ণ মনে হয়নি। যখন আমি ব্রাউজারের নেটিভ পপওভার API ব্যবহার করে টুলটিপ পুনর্নির্মাণের সিদ্ধান্ত নিয়েছিলাম তখন সেই অবস্থা ছিল। যে মুহূর্ত আমি পপওভার API চেষ্টা করেছি আমি পপওভার API ব্যবহারে স্যুইচ করিনি কারণ আমি নতুন কিছু নিয়ে পরীক্ষা করতে চেয়েছিলাম। আমি স্যুইচ করেছি কারণ আমি টুলটিপ আচরণ বজায় রাখতে ক্লান্ত ছিলাম যা আমি বিশ্বাস করি যে ব্রাউজার ইতিমধ্যেই বোঝা উচিত ছিল। আমি প্রথমে সন্দিহান ছিলাম। বেশিরভাগ নতুন ওয়েব এপিআই সরলতার প্রতিশ্রুতি দেয়, কিন্তু এখনও আঠালো, এজ-কেস হ্যান্ডলিং, বা ফলব্যাক লজিক প্রয়োজন যা শান্তভাবে একই জটিলতা পুনরায় তৈরি করে যা আপনি পালানোর চেষ্টা করছেন। সুতরাং, আমি সম্ভাব্য সবচেয়ে ছোট উপায়ে Popover API চেষ্টা করেছি। এটি দেখতে কেমন ছিল তা এখানে:
-এর সাথে সংযোগ তৈরি করে
1. কীবোর্ড "শুধু কাজ করে" কীবোর্ড সমর্থন নির্ভর করে একাধিক স্তর সঠিকভাবে সারিবদ্ধ করার উপর: ফোকাসকে টুলটিপ ট্রিগার করতে হয়েছিল, অস্পষ্টতাকে লুকিয়ে রাখতে হয়েছিল, Esc ম্যানুয়ালি তারের করতে হয়েছিল, এবং সময় গুরুত্বপূর্ণ। আপনি যদি একটি প্রান্ত কেস মিস করেন, টুলটিপটি হয় খুব বেশিক্ষণ খোলা থাকবে বা পড়ার আগেই অদৃশ্য হয়ে যাবে। পপওভার অ্যাট্রিবিউট স্বয়ংক্রিয় বা ম্যানুয়াল সেট করার সাথে, ব্রাউজারটি মৌলিক বিষয়গুলি গ্রহণ করে: Tab এবং Shift+Tab স্বাভাবিকভাবে আচরণ করে, Esc প্রতিবার টুলটিপ বন্ধ করে দেয় এবং অতিরিক্ত শ্রোতার প্রয়োজন হয় না।
আমার কোডবেস থেকে যা অদৃশ্য হয়ে গেছে তা হল গ্লোবাল কীডাউন হ্যান্ডলার, Esc-নির্দিষ্ট ক্লিনআপ লজিক এবং কীবোর্ড নেভিগেশনের সময় স্টেট চেক। কীবোর্ড অভিজ্ঞতাটি এমন কিছু হওয়া বন্ধ করে যা আমার বজায় রাখতে হয়েছিল এবং এটি একটি ব্রাউজার গ্যারান্টি হয়ে উঠেছে। 2. স্ক্রিনরিডার অনুমানযোগ্যতা এই ছিলসবচেয়ে বড় উন্নতি। এমনকি সতর্কতার সাথে ARIA কাজ করার পরেও, আচরণে ভিন্নতা রয়েছে, যেমনটি আমি আগে উল্লেখ করেছি। প্রতিটি ছোট পরিবর্তন ঝুঁকিপূর্ণ মনে হয়েছে. একটি সঠিক ভূমিকার সাথে একটি পপওভার ব্যবহার করা যা ঘটতে চলেছে ততদূর পর্যন্ত অনেক বেশি স্থিতিশীল এবং অনুমানযোগ্য দেখায় এবং অনুভব করে:
এবং এখানে আরেকটি জয়: স্যুইচের পরে, লাইটহাউস মিথস্ক্রিয়াটির জন্য ভুল ARIA রাজ্য সতর্কতাগুলিকে পতাকাঙ্কিত করা বন্ধ করে দিয়েছে, কারণ আমার কাছে ভুল হওয়ার জন্য আর কাস্টম ARIA স্টেট নেই৷
3. ফোকাস ব্যবস্থাপনা ফোকাস ভঙ্গুর হতে ব্যবহৃত. আগে, আমার নিয়ম ছিল যেমন: ফোকাস ট্রিগারকে টুলটিপ দেখাতে দিন, টুলটিপে ফোকাস সরান এবং বন্ধ করবেন না, ট্রিগারটি খুব কাছাকাছি হলে ব্লার করুন এবং টুলটিপ বন্ধ করুন এবং ম্যানুয়ালি ফোকাস পুনরুদ্ধার করুন। এটি না হওয়া পর্যন্ত এটি কাজ করেছিল। পপওভার API এর সাথে, ব্রাউজারটি একটি সহজ মডেল প্রয়োগ করে যেখানে ফোকাস আরও স্বাভাবিকভাবে পপওভারে যেতে পারে। পপওভার বন্ধ করা হলে ট্রিগারে ফোকাস ফিরে আসে এবং কোন অদৃশ্য ফোকাস ট্র্যাপ বা হারানো ফোকাস মুহূর্ত নেই। এবং আমি ফোকাস পুনরুদ্ধার কোড যোগ করিনি; আমি এটা সরিয়ে দিলাম।
উপসংহার Popover API এর অর্থ হল টুলটিপগুলি আর এমন কিছু নয় যা আপনি অনুকরণ করেন। এগুলি ব্রাউজার বোঝে এমন কিছু। খোলা, বন্ধ, কীবোর্ড আচরণ, এস্কেপ হ্যান্ডলিং, এবং অ্যাক্সেসযোগ্যতার একটি বড় অংশ এখন প্ল্যাটফর্ম থেকেই আসে, অ্যাড-হক জাভাস্ক্রিপ্ট থেকে নয়। এর অর্থ এই নয় যে টুলটিপ লাইব্রেরিগুলি অপ্রচলিত কারণ তারা এখনও জটিল ডিজাইন সিস্টেম, ভারী কাস্টমাইজেশন, বা লিগ্যাসি সীমাবদ্ধতার জন্য বোধগম্য, কিন্তু ডিফল্ট স্থানান্তরিত হয়েছে। প্রথমবারের মতো, সহজ টুলটিপটিও সবচেয়ে সঠিক হতে পারে। আপনি যদি কৌতূহলী হন, এই পরীক্ষাটি করে দেখুন: Popover API দিয়ে আপনার পণ্যে শুধুমাত্র একটি টুলটিপ প্রতিস্থাপন করুন, সবকিছু পুনরায় লিখবেন না, একটি সম্পূর্ণ সিস্টেম স্থানান্তর করবেন না এবং শুধু একটি বেছে নিন এবং দেখুন আপনার কোড থেকে কী অদৃশ্য হয়ে যায়। যখন প্ল্যাটফর্মটি আপনাকে একটি ভাল আদিম দেয়, তখন জয়টি জাভাস্ক্রিপ্টের কয়েকটি লাইন নয়, তবে এটি এমন কম জিনিস যা আপনাকে চিন্তা করতে হবে। আমার GitHub রেপোতে সম্পূর্ণ সোর্স কোডটি দেখুন। আরও পড়া পপওভার এবং সম্পর্কিত এপিআইগুলিতে আরও গভীরে যাওয়ার জন্য:
"পপিন ইন", জিওফ গ্রাহাম "পপোভার এবং ডায়ালগগুলির মধ্যে সম্পর্ক স্পষ্ট করা", জেল লিউ "পপওভার = ইঙ্গিত কি?", উনা ক্রেভেটস "ইনভোকার কমান্ড", ড্যানিয়েল শোয়ার্জ "একটি এইচটিএমএল পপওভার সহ একটি স্বয়ংক্রিয়-ক্লোজিং বিজ্ঞপ্তি তৈরি করা", প্রীতি UI Popover API ব্যাখ্যাকারী খুলুন "পপ(ওভার) দ্য বেলুন", জন রিয়া "সিএসএস অ্যাঙ্কর পজিশনিং", জুয়ান দিয়েগো রদ্রিগেজ
MDN Popover API-এর জন্য ব্যাপক প্রযুক্তিগত ডকুমেন্টেশনও অফার করে।
