Popover API
إنشاء تلميحات وأحوارات باستخدام السمة الأصلية popover
Popover API درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما الذي تفعله Popover API
تمنح Popover API لغة HTML طريقة أصلية لإنشاء popovers ومربعات حوار وتلميحات وقوائم، من دون الحاجة إلى JavaScript يدوي لتحديد الموضع أو إدارة التركيز أو الإغلاق عند النقر خارجًا أو الإغلاق بالضغط على Escape. ويتطابق السلوك المدمج مع توقعات المستخدمين.
السمة popover
أضف popover إلى أي عنصر لتحويله إلى popover. يكون مخفيًا افتراضيًا. ويعرضه زر تشغيل يتضمن popovertarget="popover-id" عند النقر. ويتولى المتصفح إدارة حالة الفتح والإغلاق تلقائيًا.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>أوضاع popover
popover="auto" (الافتراضي) — يُغلق عند النقر خارجًا أو الضغط على Escape، ولا يمكن فتح أكثر من popover تلقائي واحد في الوقت نفسه. أما popover="manual" — فلا يُغلق تلقائيًا، بل يجب إغلاقه صراحةً عبر JS أو من خلال مشغّل آخر.
أزرار التشغيل
تربط السمة popovertarget الزر بـ popover عن طريق المعرّف. ويتولى المتصفح سلوك التبديل: انقر على الزر لعرضه، وانقر مرة أخرى أو انقر خارجه لإغلاقه. ولا حاجة إلى معالجات أحداث للاستخدام الأساسي.
التصيير في الطبقة العليا
يُصيّر المتصفح popovers في الطبقة العليا، فوق كل المحتوى الآخر، بغض النظر عن z-index أو stacking context. ويزيل ذلك الخطأ الشائع المتمثل في اختباء النافذة المنبثقة خلف عنصر أب ذي overflow:hidden، وهو خطأ تعاني منه popovers المكتوبة يدويًا.
العرض والإخفاء برمجيًا
يمكن لـ JavaScript عرض popovers أو إخفاؤها: element.showPopover() وelement.hidePopover() وelement.togglePopover(). وتحمل هذه العمليات الدلالات نفسها التي يحملها المشغّل التصريحي، ويستمر الإغلاق عند النقر خارجًا في وضع auto.
حدث toggle
تطلق popovers حدث toggle عند تغير حالتها. وتكون قيمة newState هي "open" أو "closed". ويفيد ذلك في التحليلات أو إدارة التركيز أو تنسيق عناصر واجهة المستخدم الأخرى مع حالة فتح popover.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});الفئة الزائفة في CSS
تطابق الفئة الزائفة :popover-open popovers الموجودة في حالة الفتح. ويمكن تصميم الانتقالات والشفافية والتحويلات بناءً على هذه الحالة: [popover]:popover-open { opacity: 1; transform: none; }.
تحديد الموضع بالنسبة إلى المرساة
عند دمجها مع CSS Anchor Positioning API، يمكن تحديد موضع popovers تلقائيًا بالنسبة إلى مشغّلها، من دون الحاجة إلى JavaScript لنمط tooltip التقليدي القريب من الزر. وتندرج الميزتان ضمن التوجه نفسه نحو بدائيات واجهة المستخدم الحديثة.
إمكانية الوصول
يتولى المتصفح حبس التركيز في popovers المشروطة، ويعيد التركيز إلى المشغّل عند الإغلاق، ويعلن حالة فتح popover لقارئات الشاشة. ويتطلب بناء ذلك يدويًا قدرًا كبيرًا من تعليمات ARIA البرمجية؛ أما Popover API فتوفّره تلقائيًا.
دعم المتصفحات
يدعم Chrome وSafari واجهة Popover API، وأضاف Firefox الدعم مؤخرًا. ولتحقيق توافق أوسع، يتوفر Polyfill صغير. ويمكن للمشاريع الجديدة استخدام الدعم الأصلي مع تحسين تدريجي للمتصفحات الأقدم.
استبدال الأنماط القديمة
توجد العديد من مكتبات JS، مثل sweetalert وreact-modal، أساسًا للتحايل على ما تنفذه Popover API الآن بصورة أصلية. خططوا للترحيل إليها: حزم أصغر، وإعدادات افتراضية أفضل، وكود أقل حاجة إلى الصيانة. وتُعد Popover API واحدة من أكبر التحسينات التي شهدتها HTML منذ سنوات.
اختبار الفهم
ما الذي يفعله popover="auto" ولا يفعله popover="manual"؟
الملخص
تضيف Popover API السمة popover، ودوال JS showPopover/hidePopover/togglePopover، وربط المشغّل عبر popovertarget، والتصيير في الطبقة العليا فوق جميع سياقات التكديس، والفئة الزائفة :popover-open، وأحداث toggle. يغلق الوضع auto popover عند النقر خارجًا، بينما يتطلب الوضع manual إغلاقًا صريحًا. وتحل هذه الواجهة محل معظم مكتبات النوافذ المنبثقة والتلميحات المخصصة، إذ توفر بدائية HTML واحدة تتعامل مع إمكانية الوصول والتركيز وz-index بصورة صحيحة.
الأسئلة الشائعة
هل درس «Popover API» مجاني؟
نعم — نص درس «Popover API» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «Popover API»؟
إنشاء تلميحات وأحوارات باستخدام السمة الأصلية popover تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «Popover API»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.