این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

پاپاور = اشاره

Keith Cirkel

Mason Freed

تاریخ انتشار: 26 فوریه 2025

Chrome 133 با ارائه یک حالت جدید بر ویژگی popover موجود استوار است: popover="hint" . این حالت مدیریت شده توسط مرورگر، زمینه انباشتگی جدیدی را فعال می کند که ایجاد نکات ابزار و عناصر شناور زودگذر مشابه را ساده می کند. تلاش توسعه دهندگان را کاهش می دهد و در عین حال انعطاف طراحی را حفظ می کند.

مقدمه و تاریخچه

Popover API که در Chrome 114 معرفی شده است ، به شما امکان می دهد رابط کاربری شناور قابل دسترسی مانند منوها و نکات ابزار ایجاد کنید. به‌طور پیش‌فرض، popover="auto" عملکرد رد کردن نور و مدیریت تمرکز را بدون نیاز به اسکریپت‌های اضافی، همانطور که در معرفی Popover API توضیح داده شده است، انجام می‌دهد. هنگام باز کردن popover="auto" popover، تمام پاپاورهای غیر اجدادی با popover="auto" بسته می شوند، که باعث ایجاد یک API ارگونومیک می شود که معقول ترین کار را انجام می دهد.

پاپاورها پاپاورهای دیگر را می بندند

<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 از پاپاورها هم برای منوها و هم برای راهنمای ابزار استفاده می‌کنند که به هر دو امکان می‌دهد در یک زمان تحت شرایط خاص قابل مشاهده باشند:

یکی از راه‌های حل این مشکل، استفاده از popover="manual" برای عناصر راهنمای ابزار است که امکان کنترل کامل popover را با اسکریپت‌نویسی فراهم می‌کند. با این حال، این امر مستلزم اجرای مجدد رفتار انباشتگی، حذف نور و مدیریت تمرکز است – دقیقاً وظایفی که Popover API برای انجام آن طراحی شده است. این ما را بر آن داشت تا راه‌هایی را برای گسترش API برای ارائه این قابلیت از دست رفته بررسی کنیم.

از طریق تحقیقات توسعه‌دهنده، ما دو زمینه انباشته مشترک را شناسایی کردیم:

رابط کاربری دائمی : به عنوان مثال، منوها و گفتگوها.
رابط کاربری زودگذر : به عنوان مثال، کارت های شناور و راهنمای ابزار.

برای تطبیق با هر دو، popover="hint" یک پشته دوم، متمایز از popover="auto" را معرفی می‌کند و اطمینان می‌دهد که منوها حتی زمانی که نکات ابزار ظاهر می‌شوند باز می‌مانند. این رویکرد به‌جای معرفی زمینه‌های انباشته چندگانه برای انواع مختلف UI - که اساساً z-index دوباره ابداع می‌کند - با تعریف تنها دو دسته کلی، همه چیز را ساده‌تر نگه می‌دارد: UI مداوم ( auto ) و UI زودگذر ( hint ). این تعادل بین انعطاف پذیری و اجتناب از بروز مجدد همان مشکلاتی که قبل از استفاده از پاپ اور با آن مواجه بودید ایجاد می کند.

رفتار ارزش جدید

هم popover="auto" و popover="hint" از light dismiss پشتیبانی می کنند، به این معنی که وقتی کاربر بیرون از آنها کلیک می کند یا Esc را روی صفحه کلید می زند، به طور خودکار بسته می شوند. از این نظر هر دو سبک یکسان هستند.

وقتی صحبت از پنهان کردن اجباری پاپاورهای دیگر به میان می آید، 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` نامربوط s	هیچی
لانه سازی:	بله	ویژه (توضیح قبلی)	N/A—بدون رد شدن نور

حرکت ماوس

یک الگوی UX رایج این است که نکات ابزار و کارت های شناور فعال شوند. قرار دادن ماوس بر روی یک عنصر مورد علاقه، برای یک دوره زمانی، باعث نمایش کارت شناور می شود. در حال حاضر، این رفتار باید از طریق جاوا اسکریپت پیاده سازی شود، برای مثال با افزودن شنوندگان برای رویدادهای mouseenter و mouseleave . با این حال، یک API دیگر در دست توسعه است که باید راه‌اندازی شناور را به صورت اعلامی درآورد: Interest Invokers API .

این 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 را نشان می دهد. با جابجایی نشانگر از آن عنصر، popover پنهان می شود. همه بدون جاوا اسکریپت!

نمونه ها

<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 ثانیه ارائه می‌شود. توجه داشته باشید که چند جزئیات وجود دارد که در این مثال بررسی نمی شود:

شناور کردن پاپاور به خودی خود مانع از بسته شدن پاپاور دور شدن از عنصر محرک نمی شود. بنابراین امکان کپی یا چسباندن متن از پاپاور وجود ندارد.
هیچ "debouncing" وجود ندارد: نگه داشتن دکمه برای کسری کوچک از ثانیه برای شروع پاپاور کافی است، حتی اگر قبل از سپری شدن زمان تاخیر، دکمه به سرعت از آن خارج شود. در این حالت، راهنمای ابزار به سرعت باز و بسته می شود.
مثال به هیچ وجه قابل دسترسی نیست: هر کاربری که از ماوس استفاده نمی کند نمی تواند به محتوای راهنمای ابزار دسترسی پیدا کند.

این کاستی ها را می توان با جاوا اسکریپت اضافی برطرف کرد. برای مثال، کنترل‌کننده‌های رویداد focus (یا شاید keydown و keyup) برای پشتیبانی از فعال‌سازی popover مبتنی بر صفحه‌کلید باید اضافه شوند. برای توضیح مواردی که باید به درستی مدیریت شوند تا مطمئن شوید که راهنمای ابزار در دسترس است ، این پست وبلاگ عالی از سارا هیگلی را ببینید. همه این مسائل (و بیشتر) به صورت خودکار توسط Interest Invokers API رسیدگی می شود.

بیشتر بدانید

برای جزئیات بیشتر به توضیح ویژگی یا مشخصات HTML مراجعه کنید.