ٹول ٹپس آپ کو سب سے چھوٹی UI مسئلہ کی طرح محسوس کرتے ہیں۔ وہ چھوٹے اور عام طور پر پوشیدہ ہوتے ہیں۔ جب کوئی پوچھتا ہے کہ اسے کیسے بنایا جائے تو روایتی جواب تقریباً ہمیشہ جاوا اسکرپٹ لائبریری کا استعمال کرکے واپس آتا ہے۔ اور ایک طویل عرصے سے، یہ سمجھدار مشورہ تھا. میں نے بھی اس کی پیروی کی۔ سطح پر، ایک ٹول ٹپ آسان ہے۔ کسی عنصر پر ہوور کریں یا فوکس کریں، کچھ متن کے ساتھ ایک چھوٹا سا باکس دکھائیں، پھر جب صارف وہاں سے چلا جائے تو اسے چھپائیں۔ لیکن ایک بار جب آپ ایک کو حقیقی صارفین کو بھیج دیتے ہیں، تو کنارے ظاہر ہونا شروع ہو جاتے ہیں۔ کی بورڈ صارفین ٹرگر میں ٹیب کرتے ہیں، لیکن ٹول ٹپ کبھی نہیں دیکھتے۔ اسکرین ریڈرز دو بار اس کا اعلان کرتے ہیں، یا بالکل نہیں۔ جب آپ ماؤس کو بہت تیزی سے حرکت دیتے ہیں تو ٹول ٹپ ٹمٹماتا ہے۔ یہ چھوٹی اسکرینوں پر مواد کو اوورلیپ کرتا ہے۔ Esc دبانے سے یہ بند نہیں ہوتا ہے۔ توجہ کھو جاتی ہے۔ وقت گزرنے کے ساتھ، میرا ٹول ٹِپ کوڈ ایک ایسی چیز میں بڑھتا گیا جس کا میں واقعی میں مزید مالک نہیں بننا چاہتا تھا۔ واقعہ سننے والوں کے ڈھیر لگ گئے۔ ہوور اور فوکس کو الگ الگ ہینڈل کرنا پڑا۔ باہر کلکس کے لیے خصوصی کیسز کی ضرورت ہوتی ہے۔ ARIA صفات کو ہاتھ سے ہم آہنگی میں رکھنا تھا۔ ہر چھوٹی فکس نے منطق کی ایک اور پرت کا اضافہ کیا۔ لائبریریوں نے مدد کی، لیکن وہ بلیک باکسز کی طرح بھی تھے جو میں نے پردے کے پیچھے کیا ہو رہا ہے اس کو پوری طرح سمجھنے کے بجائے اس کے ارد گرد کام کیا۔ یہی چیز تھی جس نے مجھے نئے پاپ اوور API کو دیکھنے کے لئے دھکیل دیا۔ میں یہ دیکھنا چاہتا تھا کہ اگر میں لائبریری کی مدد کے بغیر براؤزر کے مقامی ماڈل کا استعمال کرتے ہوئے ایک ٹول ٹپ کو دوبارہ بناتا ہوں تو کیا ہوگا۔ جیسا کہ ہم شروع کرتے ہیں، یہ قابل توجہ ہے کہ، کسی بھی نئی خصوصیت کی طرح، اس کے ساتھ کچھ چیزیں ایسی ہیں جو ابھی تک استری کی جا رہی ہیں۔ اس نے کہا، یہ فی الحال زبردست براؤزر سپورٹ حاصل کرتا ہے، حالانکہ مجموعی API کے کئی ٹکڑے ہیں جو بہاؤ میں ہیں۔ اس دوران کینیئس پر نظر رکھنا قابل قدر ہے۔ "پرانا" ٹول ٹپ Popover API سے پہلے، ٹول ٹپ لائبریری کا استعمال کوئی شارٹ کٹ نہیں تھا۔ یہ پہلے سے طے شدہ تھا۔ براؤزرز کے پاس ٹول ٹپ کا مقامی تصور نہیں تھا جو ماؤس، کی بورڈ اور معاون ٹیکنالوجی پر کام کرتا ہو۔ اگر آپ درستگی کی پرواہ کرتے ہیں تو، آپ کا واحد آپشن لائبریری کا استعمال کرنا تھا، اور میں نے بالکل یہی کیا۔ اعلی سطح پر، پیٹرن ہمیشہ ایک جیسا ہوتا تھا: ایک ٹرگر عنصر، ایک پوشیدہ ٹول ٹپ عنصر، اور دونوں کو مربوط کرنے کے لیے JavaScript۔
لائبریری نے وائرنگ کو سنبھالا جس نے عنصر کو ہوور یا فوکس پر ظاہر کرنے، دھندلا پن یا ماؤس چھوڑنے پر چھپنے، اور اسکرول پر دوبارہ پوزیشن/سائز کرنے کی اجازت دی۔
وقت کے ساتھ، ٹول ٹپ نازک ہو سکتا ہے. چھوٹی تبدیلیوں سے خطرہ ہوتا ہے۔ معمولی اصلاحات کی وجہ سے رجعت ہوئی۔ اس سے بھی بدتر بات یہ ہے کہ نئے ٹول ٹپس کو شامل کرنے سے وہی پیچیدگی وراثت میں ملی۔ چیزوں نے تکنیکی طور پر کام کیا، لیکن کبھی بھی طے یا مکمل محسوس نہیں ہوا۔ یہ وہی حالت تھی جب میں نے براؤزر کے مقامی Popover API کا استعمال کرتے ہوئے ٹول ٹپ کو دوبارہ بنانے کا فیصلہ کیا۔ وہ لمحہ جب میں نے Popover API کو آزمایا میں نے Popover API استعمال کرنے پر سوئچ نہیں کیا کیونکہ میں کچھ نیا تجربہ کرنا چاہتا تھا۔ میں نے سوئچ کیا کیونکہ میں ٹول ٹِپ کے رویے کو برقرار رکھنے سے تھک گیا تھا جس کے بارے میں مجھے یقین تھا کہ براؤزر کو پہلے ہی سمجھ جانا چاہیے تھا۔ مجھے پہلے تو شک ہوا۔ زیادہ تر نئے ویب APIs سادگی کا وعدہ کرتے ہیں، لیکن پھر بھی گلو، ایج کیس ہینڈلنگ، یا فال بیک منطق کی ضرورت ہوتی ہے جو خاموشی سے وہی پیچیدگی دوبارہ بناتی ہے جس سے آپ فرار ہونے کی کوشش کر رہے تھے۔ لہذا، میں نے Popover API کو سب سے چھوٹے طریقے سے آزمایا۔ یہ اس کی طرح نظر آتا ہے:
سے کنکشن بناتا ہے۔
کے طور پر منظم کرتا ہے۔
1. کی بورڈ "بس کام کرتا ہے" کی بورڈ سپورٹ کا انحصار ایک سے زیادہ پرتوں پر درست طریقے سے لگا ہوا تھا: فوکس کو ٹول ٹپ کو متحرک کرنا پڑتا تھا، بلر کو اسے چھپانا پڑتا تھا، Esc کو دستی طور پر وائر کرنا پڑتا تھا، اور وقت کی اہمیت ہوتی تھی۔ اگر آپ نے ایک کنارے کا کیس چھوڑ دیا، تو ٹول ٹپ یا تو بہت دیر تک کھلا رہے گا یا اسے پڑھنے سے پہلے غائب ہو جائے گا۔ پاپ اوور انتساب کو آٹو یا مینوئل پر سیٹ کرنے کے ساتھ، براؤزر بنیادی باتوں کو سنبھال لیتا ہے: Tab اور Shift+Tab عام طور پر برتاؤ کرتا ہے، Esc ہر بار ٹول ٹپ کو بند کر دیتا ہے، اور کسی اضافی سننے والوں کی ضرورت نہیں ہوتی ہے۔
میرے کوڈبیس سے جو غائب ہوا وہ تھے عالمی کی ڈاون ہینڈلرز، Esc مخصوص کلین اپ منطق، اور کی بورڈ نیویگیشن کے دوران اسٹیٹ چیک۔ کی بورڈ کا تجربہ ایک ایسی چیز بننا بند کر دیا جو مجھے برقرار رکھنا تھا، اور یہ براؤزر کی گارنٹی بن گیا۔ 2. اسکرین ریڈر کی پیشن گوئی یہ تھاسب سے بڑی بہتری. یہاں تک کہ محتاط ARIA کام کے ساتھ، رویے میں فرق ہوتا ہے، جیسا کہ میں نے پہلے بیان کیا تھا۔ ہر چھوٹی تبدیلی کو خطرہ محسوس ہوا۔ ایک مناسب کردار کے ساتھ پاپ اوور کا استعمال بہت زیادہ مستحکم اور پیش قیاسی محسوس ہوتا ہے جہاں تک ہونے والا ہے:
اور یہاں ایک اور جیت ہے: سوئچ کے بعد، Lighthouse نے تعامل کے لیے غلط ARIA ریاستی انتباہات کو جھنڈا لگانا بند کر دیا، بڑی حد تک اس لیے کہ اب میرے لیے اتفاقی طور پر غلط ہونے کے لیے ARIA اسٹیٹس نہیں ہیں۔
3. فوکس مینجمنٹ فوکس کمزور ہوا کرتا تھا۔ اس سے پہلے، میرے پاس اس طرح کے اصول تھے: فوکس ٹرگر کو ٹول ٹپ دکھانے دیں، ٹول ٹپ میں فوکس منتقل کریں اور بند نہ کریں، ٹرگر کو بہت قریب ہونے پر بلر کریں، اور ٹول ٹپ کو بند کریں اور دستی طور پر فوکس بحال کریں۔ یہ اس وقت تک کام کرتا رہا جب تک یہ نہیں ہوا۔ Popover API کے ساتھ، براؤزر ایک آسان ماڈل نافذ کرتا ہے جہاں فوکس قدرتی طور پر پاپ اوور میں منتقل ہو سکتا ہے۔ پاپ اوور کو بند کرنے سے فوکس ٹرگر پر واپس آجاتا ہے، اور کوئی پوشیدہ فوکس ٹریپس یا کھوئے ہوئے فوکس لمحات نہیں ہیں۔ اور میں نے فوکس ریسٹوریشن کوڈ شامل نہیں کیا۔ میں نے اسے ہٹا دیا۔
نتیجہ Popover API کا مطلب ہے کہ ٹول ٹِپس اب کوئی ایسی چیز نہیں ہیں جسے آپ نقل کرتے ہیں۔ وہ ایسی چیزیں ہیں جو براؤزر سمجھتا ہے۔ کھولنا، بند کرنا، کی بورڈ کا برتاؤ، Escape ہینڈلنگ، اور رسائی کا ایک بڑا حصہ اب پلیٹ فارم سے ہی آتا ہے، ایڈہاک JavaScript سے نہیں۔ اس کا مطلب یہ نہیں ہے کہ ٹول ٹِپ لائبریریاں متروک ہیں کیونکہ وہ اب بھی پیچیدہ ڈیزائن سسٹمز، بھاری تخصیص، یا میراثی رکاوٹوں کو سمجھتی ہیں، لیکن ڈیفالٹ تبدیل ہو گیا ہے۔ پہلی بار، سب سے آسان ٹول ٹِپ سب سے درست بھی ہو سکتا ہے۔ اگر آپ جاننا چاہتے ہیں تو یہ تجربہ آزمائیں: Popover API کے ساتھ اپنے پروڈکٹ میں صرف ایک ٹول ٹپ کو تبدیل کریں، ہر چیز کو دوبارہ نہ لکھیں، پورے سسٹم کو منتقل نہ کریں، اور صرف ایک کو منتخب کریں اور دیکھیں کہ آپ کے کوڈ سے کیا غائب ہے۔ جب پلیٹ فارم آپ کو ایک بہتر پرائمٹیو فراہم کرتا ہے، جیت صرف JavaScript کی چند لائنوں کی نہیں ہوتی، بلکہ یہ کم چیزیں ہوتی ہیں جن کے بارے میں آپ کو بالکل بھی فکر کرنے کی ضرورت ہوتی ہے۔ میرے GitHub ریپو میں مکمل سورس کوڈ دیکھیں۔ مزید پڑھنا popovers اور متعلقہ APIs میں گہرے غوطہ لگانے کے لیے:
"پاپن ان"، جیوف گراہم "پاپ اوور اور ڈائیلاگ کے درمیان تعلق کو واضح کرنا"، زیل لیو "پاپ اوور = اشارہ کیا ہے؟"، یونا کریوٹس "انوکر کمانڈز"، ڈینیئل شوارز "ایچ ٹی ایم ایل پاپ اوور کے ساتھ آٹو کلوزنگ نوٹیفکیشن بنانا"، پریتھی UI Popover API Explainer کھولیں۔ "پاپ (اوور) دی غبارے"، جان ریا "سی ایس ایس اینکر پوزیشننگ"، جوآن ڈیاگو روڈریگز
MDN Popover API کے لیے جامع تکنیکی دستاویزات بھی پیش کرتا ہے۔
