نافذة منبثقة = تلميح

Keith Cirkel

Mason Freed

تاريخ النشر: 26 شباط (فبراير) 2025

يستند الإصدار 133 من Chrome إلى ميزة النافذة المنبثقة الحالية من خلال تقديم وضع جديد: popover="hint". يتيح هذا الوضع الذي يديره المتصفّح سياقًا جديدًا للتكديس مما يبسّط إنشاء نصائح التلميح والعناصر العائمة المؤقتة المشابهة. ويساعد ذلك في تقليل جهد المطوّر مع الحفاظ على مرونة التصميم.

المقدمة والتاريخ

تتيح لك واجهة برمجة التطبيقات Popover API، التي تم طرحها في الإصدار 114 من Chrome، إنشاء واجهة مستخدم عائمة سهلة الاستخدام، مثل القوائم ونصائح التلميح. بشكلٍ تلقائي، popover="auto" تتعامل مع وظيفة إغلاق النافذة المنبثقة وإدارة التركيز نيابةً عنك، بدون الحاجة إلى نصوص برمجية إضافية، كما هو موضّح في مقالة تقديم Popover API. عند فتح نافذة منبثقة popover="auto"، سيتم إغلاق جميع النوافذ المنبثقة الأخرى التي ليست من الأجداد والتي تحتوي على popover="auto"، ما يجعل واجهة برمجة التطبيقات ملائمةً وتؤدي الأكثر منطقية.

النوافذ المنبثقة التي تغلق النوافذ المنبثقة الأخرى

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

في هذا المثال، سيؤدي فتح المنبثق 2 إلى إغلاق المنبثق 1، لأنّ popover="auto" لا يسمح بفتح أكثر من منبثق واحد في المرة الواحدة.

على الرغم من أنّ هذا السلوك يعمل بشكل جيد مع القوائم ومربّعات الحوار، إلا أنّه قد يتسبب في حدوث مشاكل عند الحاجة إلى توفّر أنواع متعدّدة من واجهة المستخدم العائمة. على سبيل المثال، قد يتعارض استخدام popover="auto" في كل من القائمة والتلميح، حيث يؤدي فتح التلميح إلى إغلاق القائمة. قد يبدو هذا الموقف غير شائع، ولكنه يظهر كثيرًا في واجهة مستخدم تطبيقات حديثة التصميم. على سبيل المثال، تستخدم القوائم في عنوان github.com نوافذ منبثقة لكلّ من القوائم ونصائح التلميح، ما يسمح بظهور كليهما في الوقت نفسه في ظلّ شروط معيّنة:

قائمة GitHub

تتمثل إحدى طرق حلّ هذه المشكلة في استخدام popover="manual" لعناصر التلميح، ما يسمح بالتحكم الكامل في النافذة المنبثقة باستخدام النصوص البرمجية. ومع ذلك، يتطلّب ذلك إعادة تنفيذ سلوك التجميع وإغلاق الإضاءة وإدارة التركيز، وهي المهام التي تم تصميم واجهة برمجة التطبيقات Popover API للتعامل معها على وجه التحديد. دفعنا ذلك إلى استكشاف طرق لتوسيع نطاق واجهة برمجة التطبيقات من أجل توفير هذه الميزة المفقودة.

من خلال الأبحاث التي أجريناها مع المطوّرين، حدّدنا سياقَين شائعَين للتكديس:

• واجهة مستخدِم دائمة: على سبيل المثال، القوائم ومربّعات الحوار
• واجهة المستخدم المؤقتة: على سبيل المثال، بطاقات التمرير والتلميحات.

لاستيعاب كليهما، يقدّم popover="hint" حزمة ثانية، مختلفة عن popover="auto"، ما يضمن بقاء القوائم مفتوحة حتى عند ظهور التلميحات. بدلاً من تقديم سياقات تجميع متعددة لأنواع مختلفة من واجهة المستخدم، ما يؤدي إلى إعادة اختراع z-index بشكل أساسي، يحافظ هذا النهج على البساطة من خلال تحديد فئتين عامتين فقط: واجهة مستخدم دائمة (auto) وواجهة مستخدم مؤقتة (hint). ويحقق ذلك التوازن بين المرونة وتجنُّب مجددًا الظهور للمشاكل نفسها التي واجهتها قبل استخدام النافذة المنبثقة.

سلوك القيمة الجديدة

يتيح كل من popover="auto" وpopover="hint" إغلاقًا خفيفًا، ما يعني أنّه يتم إغلاقهما تلقائيًا عندما ينقر المستخدم خارجهما أو يضغط على Esc على ال keyboard. وفي هذا الصدد، كلا الأسلوبَين متطابقان.

في ما يتعلّق بإخفاء النوافذ المنبثقة الأخرى بشكلٍ قسري، يغلق popover="auto" كل النوافذ المنبثقة الأخرى من النوعَين auto وhint عند فتحه، ما يضمن أنّه لن يكون هناك سوى نافذة منبثقة واحدة من هذا النوع نشطة في كل مرة (الاستثناء الوحيد هنا هو النوافذ المنبثقة المُدمجة، описанة أدناه). من ناحية أخرى، لا يؤدي popover="hint" إلا إلى إخفاء نوافذ hint المنبثقة الأخرى بشكل قسري، ما يسمح للمواضع المنبثقة والنصائح التوضيحية بالبقاء مفتوحة ومشترَكة.

ويختلفان بشكل كبير في سلوك التعشيش. popover="auto" تتيح ميزة "تداخل النوافذ المنبثقة"، ما يسمح ببقاء نافذة منبثقة فرعية مفتوحة داخل نافذة منبثقة رئيسية أخرى. لعنصر popover="hint" سلوك خاص للتداخل، وهو ما يُستخدم فيه "الحزم" المنفصلة. عندما تكون نافذة منبثقة hint داخل نافذة منبثقة auto، تنضم إلى حزمة auto للحفاظ على التجميع السياقي، ما يعني أنّها ستظل مفتوحة إلى أن تؤدي النوافذ المنبثقة الأخرى من النوع auto أو hint إلى إخفائها بشكلٍ قسري. يقدّم هذا السلوك أسلوبًا بسيطًا، حيث لا تقاطع نصائح التلميح القوائم أو المعلومات المنبثقة الأخرى.

أخيرًا، بالنسبة إلى حالات الاستخدام المختلفة جدًا، هناك دائمًا popover="manual"، الذي لا يتضمّن أيًا من هذه السلوكيات المضمّنة، ما يتيح لك تحديد الوظيفة والسلوك الدقيقَين اللذين تحتاج إليهما.

	popover="auto"	popover="hint"	popover="manual"
إغلاق خفيف	نعم	نعم	لا
عمليات الإخفاء الإجباري:	auto وhint غير مرتبطَين	عناصر hint غير ذات صلة	Nothing
الدمج:	نعم	خاص (سبق وصفه)	لا ينطبق: لا يمكن إغلاق الجهاز بدون ضوء

تنشيط التمرير

من الأنماط الشائعة لتجربة المستخدم أن يتم تنشيط نصائح التلميح وبطاقات التمرير من خلال التمرير بمؤشر الماوس. يؤدي تمرير مؤشر الماوس فوق عنصر يهمّك لفترة زمنية إلى عرض البطاقة المنبثقة. في الوقت الحالي، يجب تنفيذ هذا السلوك من خلال JavaScript، على سبيل المثال، من خلال إضافة مستمعين للحدثَين mouseenter و mouseleave. ومع ذلك، يتم تطوير واجهة برمجة تطبيقات أخرى من المفترض أن تجعل ميزة "بدء التفاعل من خلال التمرير بمؤشر الماوس" توضيحية: Interest Invokers API.

لا تزال واجهة برمجة التطبيقات هذه قيد التطوير، ولكن الفكرة العامة هي إضافة سمة تدعى interesttarget إلى العديد من أنواع العناصر، ما يمنحهم سلوكًا يؤدي إلى بدء التمرير فوقها:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span> 

باستخدام رمز HTML السابق، سيؤدي تمرير مؤشر الماوس فوق الرابط <a> إلى عرض النافذة المنبثقة my-hovercard تلقائيًا. سيؤدي نقل المؤشر بعيدًا عن هذا العنصر إلى إخفاء النافذة المنبثقة. وكل ذلك بدون استخدام JavaScript.

أمثلة

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

جرِّب هذه الميزة في بث مباشر.

يستخدم هذا المثال الرمز popover="hint" لإنشاء نص إرشادي أساسي يقدّم المزيد من المعلومات عن الزر عند تمرير مؤشر الماوس فوقه. يتم توفير فعالية المرّة التي يحوم فيها مؤشر الماوس من خلال معالجات الأحداث لكلّ من mouseenter وmouseleave مع تأخير بسيط يبلغ 0.5 ثانية. يُرجى العِلم أنّ هناك بعض التفاصيل التي لا يعالجها هذا المثال:

1. إنّ تمرير مؤشر الماوس فوق النافذة المنبثقة نفسها لا يمنع إغلاق النافذة المنبثقة عند تمرير المؤشر بعيدًا عن العنصر المشغِّل. وبالتالي، لا يمكن نسخ نص من النافذة المنبثقة، على سبيل المثال.
2. لا يتم استخدام ميزة "إزالة الارتعاش": يكفي تمرير مؤشر الماوس فوق الزر لفترة قصيرة جدًا لتشغيل النافذة المنبثقة، حتى إذا تم تمرير مؤشر الماوس فوق الزر بسرعة قبل انقضاء وقت التأخير. في هذه الحالة، "وميض" التلميح يفتح ويغلق بسرعة.
3. لا يمكن الوصول إلى المثال على الإطلاق: لا يمكن لأي مستخدم لا يستخدم فأرة الوصول إلى محتوى التلميح.

يمكن حلّ هذه المشاكل باستخدام JavaScript إضافي. على سبيل المثال، focus (أو ربما keydown وkeyup)) معالجَي الأحداث يجب إضافتهما لإتاحة تفعيل النافذة المنبثقة بالاستناد إلى لوحة المفاتيح. للحصول على شرح للإجراءات التي يجب اتّخاذها بشكل صحيح للتأكّد من إمكانية الوصول إلى التلميح، يمكنك الاطّلاع على هذه المشاركة الرائعة في المدونة التي كتبتها سارة هيغلي. سيتم التعامل مع كل هذه المشاكل (وغيرها) تلقائيًا بشكل تعريفي من خلال Interest Invokers API.

التعرف على المزيد

اطّلِع على شرح الميزة أو مواصفات HTML للحصول على مزيد من التفاصيل.