آخرین بازبینی: ۱۴۰۳/۱۲/۳۰

معرفی Popover در مرورگر برای برنامه‌نویسان وب

نیاز به پنجره‌های بازشونده در طراحی سایت مدرن بیشتر از گذشته وجود دارد. این پنجره‌ها که پاپ‌آپ یا پنجره یا با نام‌های دیگر شناخته می‌شوند، برای دریافت اطلاعات یا نمایش پیامی به کاربر هستند. همچنین می‌توانند برای نمایش منوها یا پیام‌های راهنما کاربرد داشته باشند. پیش از معرفی API اختصاصی Popover در HTML، توسعه‌دهندگان معمولاً برای پیاده‌سازی چنین عناصری به استفاده از JavaScript و CSS متکی بودند که اغلب با پیچیدگی‌هایی در زمینه مدیریت موقعیت، تمرکز (Focus)، و دسترس‌پذیری (Accessibility) همراه بود .

ویژگی popover در HTML به عنوان یک استاندارد جدید معرفی شده است تا فرآیند ایجاد و مدیریت پاپ‌آپ‌ها را ساده‌تر کند و از پشتیبانی داخلی مرورگر برای بسیاری از جنبه‌های پیچیده مانند مدیریت لایه بالایی (Top Layer)، رفتار بسته‌شدن با کلیک در خارج (Light Dismiss) و مدیریت تمرکز کاربر بهره ببرد . استفاده از این API بومی مزایای متعددی نسبت به روش‌های سنتی دارد و به توسعه‌دهندگان فرانت‌اند امکان می‌دهد رابط‌های کاربری کارآمدتر و با دسترس‌پذیری بالاتر را آسان‌تر ایجاد کنند.

درک ویژگی popover در HTML

ویژگی popover یک صفت سراسری (Global Attribute) در HTML است که به یک عنصر اختصاص داده می‌شود تا آن را به عنوان یک عنصر پاپ‌اور تعیین کند . این ویژگی سه مقدار ممکن را می‌پذیرد: auto، manual، و hint .

وضعیت auto

پاپ‌اورهای با مقدار auto برای رایج‌ترین موارد استفاده مانند منوها و Tooltip طراحی شده‌اند. رفتار این نوع پاپ‌اورها به گونه‌ای است که با کلیک در خارج از آن‌ها یا فشردن کلید Esc به طور خودکار بسته می‌شوند که به آن «بسته‌شدن سبک» یا Light Dismiss گفته می‌شود. علاوه بر این، نمایش یک پاپ‌اور auto معمولاً باعث بسته شدن سایر پاپ‌اورهای auto می‌شود، مگر اینکه آن‌ها به صورت تودرتو باشند. این رفتار به جلوگیری از شلوغی صفحه با چندین پاپ‌اور کمک می‌کند و تمرکز کاربر را به هم نمی‌زند. لازم به ذکر است که تنظیم مقدار خالی برای ویژگی popover (یعنی popover یا popover="") معادل با تنظیم popover="auto" است و به عنوان یک روش کوتاه‌نویسی برای رایج‌ترین نوع پاپ‌اور عمل می‌کند. این ویژگی‌های پاپ‌اورهای auto، آن‌ها را برای سناریوهایی که نیازمند تعاملات سریع و موقت هستند، بسیار مناسب می‌سازد.

<div id="mypopover" popover="auto">محتوای پاپ آپ</div>
<!-- یا به شکل خلاصه -->
<div id="mypopover" popover>محتوای پاپ آپ</div>

<div id="mypopover" popover="auto">محتوای پاپ آپ</div>

<div id="mypopover" popover>محتوای پاپ آپ</div>

وضعیت manual

پاپ‌اورهای با مقدار manual کنترل بیشتری را در اختیار توسعه‌دهندگان قرار می‌دهند و بر خلاف نوع auto، به طور خودکار با کلیک در خارج یا فشردن کلید Esc بسته نمی‌شوند . این نوع پاپ‌اورها باید به صورت صریح با استفاده از دکمه‌های مشخص به‌نمایش درآیند یا مخفی شوند. یا از طریق جاوااسکریپت مدیریت شوند. این امکان برای مواردی که نیاز به نمایش چندین پاپ‌اور مستقل به طور همزمان وجود دارد، بسیار مفید است. به عنوان مثال، می‌توان از پاپ‌اورهای manual برای نمایش اعلان‌های پایدار (Persistent Notifications) یا عناصر رابط کاربری سفارشی که نیاز به منطق باز و بسته شدن خاص دارند، استفاده کرد. این رفتار، انعطاف‌پذیری لازم برای پیاده‌سازی الگوهای رابط کاربری پیچیده‌تر را در دسترس قرار می‌دهد.

<div id="mypopover" popover="manual">محتوای پاپ آپ</div>

1	<div id="mypopover" popover="manual">محتوای پاپ آپ</div>

وضعیت hint

پاپ‌اورهای با مقدار hint برای رفتاری شبیه به Tooltip استفاده می‌شوند و اغلب توسط رویدادهای جاوااسکریپت غیرکلیکی مانند mouseover یا focus فعال می‌شوند. این نوع پاپ‌اورها هنگام نمایش، پاپ‌اورهای auto را نمی‌بندند، اما سایر پاپ‌اورهای hint را می‌بندند. آن‌ها همچنین می‌توانند به شکل ساده توسط کاربر بسته شوند و به درخواست‌های بسته‌شدن پاسخ دهند. با این حال، لازم به ذکر است که مقدار hint یک ویژگی آزمایشی است و ممکن است سطح پشتیبانی آن در مرورگرهای مختلف متفاوت باشد.

<div id="mypopover" popover="hint">محتوای پاپ آپ</div>

1	<div id="mypopover" popover="hint">محتوای پاپ آپ</div>

ویژگی‌های popovertarget و popovertargetaction

برای مرتبط کردن یک دکمه با یک پاپ‌اور، می‌توانید از ویژگی سراسری popovertarget در عناصر <button> یا <input type="button"> استفاده کنید. مقدار این ویژگی باید با مقدار id عنصر پاپ‌اور یکی باشد. به طور پیش‌فرض، دکمه‌ای که از popovertarget استفاده می‌کند، وضعیت نمایش پاپ‌اور مرتبط را تغییر می‌دهد(نمایش و مخفی کردن در صورت نیاز). با استفاده از ویژگی popovertargetaction می‌توان این رفتار پیش‌فرض را لغو کرد و به طور صریح مشخص کرد که دکمه باید پاپ‌اور را فقط نمایش دهد (show) یا فقط پنهان کند (hide) . این ویژگی‌ها امکان کنترل ساده و اعلانی پاپ‌اورها را بدون نیاز به نوشتن JavaScript فراهم می‌کنند و ساختار معنایی بهتری را برای سند HTML ایجاد می‌کنند.

<button popovertarget="mypopover" popovertargetaction="show">
    نمایش پاپ آپ
</button>
<button popovertarget="mypopover" popovertargetaction="hide">
    مخفی کردن پاپ آپ
</button>
<div id="mypopover" popover>محتوای پاپ آپ</div>

نمایش پاپ آپ

</button>

مخفی کردن پاپ آپ

</button>

<div id="mypopover" popover>محتوای پاپ آپ</div>

موارد استفاده و مزایا

ویژگی popover در HTML سناریوهای متنوعی می‌تواند داشته باشد. از جمله موارد استفاده می‌توان به ایجاد منوهای تعاملی، پیام‌های اعلان(Notification)، استفاده در فرم‌های وب و موارد دیگر.

در مقایسه با روش‌های سنتی که از عناصر div و جاوااسکریپت برای ایجاد پاپ‌اورها، مودال‌ها (Modals)، و منوهای کشویی استفاده می‌کردند، API Popover مزایای متعددی دارد:

عملکرد داخلی
API Popover به صورت اصولی مدیریت موقعیت، مدیریت تمرکز، و دسترس‌پذیری را در لایه‌ی مرورگر انجام می‌دهد و نیاز به اسکریپت‌نویسی سفارشی را کاهش می‌دهد.
دسترسی‌پذیری
استفاده از یک ویژگی HTML، دسترس‌پذیری را برای کاربران استفاده‌کننده از صفحه‌خوان‌ها و صفحه‌کلید بهبود می‌بخشد.
کاهش پیچیدگی در کدها
ایجاد عناصر شبیه به پاپ‌اور ساده‌تر شده و منجر به کد تمیزتر و قابل نگهداری‌تر می‌شود و استفاده از کتابخانه‌های جانبی را کاهش می‌دهد.
رندر در لایه بالایی
رندر خودکار پاپ‌اورها در لایه بالایی (Top Layer) مدیریت z-index را ساده می‌کند. دیگر نیازی به نگرانی در مورد تداخل لایه‌ها و اطمینان از نمایش پاپ‌اور در بالای سایر عناصر نیست.
کنترل آسان بدون نیاز به جاوااسکریپت
ویژگی popovertarget امکان ایجاد عملکرد تغییر وضعیت پایه را بدون نیاز به جاوااسکریپت فراهم می‌کند. این روش، برای سناریوهای ساده بسیار کارآمد است.
پشتیبانی از انیمیشن
ایجاد انیمیشن برای نمایش و پنهان کردن پاپ‌اورها با استفاده از CSS آسان‌تر است. API Popover به خوبی با انیمیشن‌ها و ترنزیشن‌های CSS کار می‌کند.

سازگاری با مرورگرها

API Popover در حال حاضر توسط اکثر مرورگرهای مدرن پشتیبانی می‌شود، از جمله Chrome، Edge، Firefox، Safari، و Opera، و همچنین نسخه‌های موبایل آن‌ها. بر اساس اطلاعات موجود، این قابلیت از ژانویه ۲۰۲۵ به طور کامل در آخرین نسخه‌های این مرورگرها فعال شده است. برای اطمینان از آخرین وضعیت پشتیبانی مرورگرها، اینجا را ببینید.

در حالی که پشتیبانی از مقدار auto و manual ویژگی popover در مرورگرهای مدرن گسترده است، مقدار hint همچنان در وضعیت آزمایشی قرار دارد و ممکن است پشتیبانی آن محدودتر باشد. توسعه‌دهندگان باید این موضوع را در نظر بگیرند و در صورت استفاده از hint، آمادگی لازم برای راهکارهای جایگزین در صورت عدم پشتیبانی مرورگر را داشته باشند.

برای مرورگرهای قدیمی‌تر که از Popover به صورت بومی پشتیبانی نمی‌کنند، ممکن است بتوان از پلی‌فیل‌ها (Polyfills) یا راهکارهای جایگزین مبتنی بر جاوااسکریپت استفاده کرد.

مدیریت پاپ‌اورها با جاوااسکریپت

علاوه بر استفاده ساده از ویژگی popover، می‌توان از طریق جاوااسکریپت هم با عناصر پاپ‌اور تعامل داشت.

ویژگی HTMLElement.popover

ویژگی popover در رابط HTMLElement امکان دریافت یا تنظیم وضعیت پاپ‌اور یک عنصر را فراهم می‌کند.

متدهای کنترل نمایش

showPopover()‎
این متد یک عنصر پاپ‌اور (که دارای ویژگی popover معتبر است) را نمایش می‌دهد. هنگامی که showPopover() روی یک عنصر پنهان با ویژگی popover فراخوانی می‌شود.
hidePopover()‎
این متد یک عنصر پاپ‌اور را پنهان می‌کند. مشابه showPopover().
togglePopover()‎
این متد وضعیت نمایش یک عنصر پاپ‌اور را تغییر می‌دهد (اگر نمایش داده شده باشد، پنهان می‌کند و اگر پنهان باشد، نمایش می‌دهد)

استایل‌دهی به پاپ‌اورها با CSS

Popover امکان استایل‌دهی به عناصر پاپ‌اور را با استفاده از CSS فراهم می‌کند. دو ویژگی مهم CSS که در این زمینه کاربرد دارند عبارتند از شبه‌کلاس ‎:popover-open و شبه‌عنصر ‎::backdrop

شبه‌کلاس ‎:popover-open

شبه‌کلاس ‎:popover-open برای استایل‌دهی به عناصر پاپ‌اور در زمانی که در وضعیت نمایش قرار دارند، استفاده می‌شود.

شبه‌عنصر ‎::backdrop

شبه‌عنصر ::backdrop لایه‌ای را نشان می‌دهد که در پشت پاپ‌اور قرار می‌گیرد. این لایه معمولاً برای ایجاد یک پوشش تیره بر روی بقیه محتوای صفحه به منظور جلب توجه به پاپ‌اور استفاده می‌شود. می‌توان از CSS برای استایل‌دهی به ‎::backdrop استفاده کرد، به عنوان مثال، برای تغییر رنگ پس‌زمینه یا افزودن شفافیت.

مثال‌های عملی

در زیر چند مثال ساده از نحوه ایجاد و مدیریت پاپ‌اورها با استفاده از HTML، CSS، و جاوااسکریپت آورده شده است:

تغییر استایل پاپ‌اور با CSS

در ادامه یک نمونه کد ساده که می‌تواند برای دادن استایل به پاپ‌اور در حالت باز به کار برود را مشاهده می‌کنید:

#my-popover:popover-open {
	width: 300px;
	height: 100px;
	background-color: lightblue;
	border: 1px solid blue;
	padding: 10px;
	border-radius: 5px;
}

#my-popover:popover-open::backdrop {
	background-color: rgba( 0, 0, 0, 0.5 );
}

#my-popover:popover-open {

width: 300px;

height: 100px;

background-color: lightblue;

border: 1px solid blue;

padding: 10px;

border-radius: 5px;

}

#my-popover:popover-open::backdrop {

background-color: rgba( 0, 0, 0, 0.5 );

}

کنترل پاپ‌اور با جاوااسکریپت

یک مثال ساده که عملکردهای اصلی پاپ‌اور در جاوااسکریپت را مدیریت می‌کند مشاهده می‌کنید:

<button id="show-button">نمایش</button>
<div popover id="js-popover">پاپ‌اور کنترل شده با جاوااسکریپت</div>

<script>
	const jsPopover = document.getElementById( 'js-popover' );

	document.getElementById( 'show-button' ).addEventListener( 'click', () => {
		jsPopover.showPopover();
	} );
</script>

<button id="show-button">نمایش</button>

<div popover id="js-popover">پاپ‌اور کنترل شده با جاوااسکریپت</div>

const jsPopover = document.getElementById( 'js-popover' );

document.getElementById( 'show-button' ).addEventListener( 'click', () => {

jsPopover.showPopover();

} );

</script>

ویژگی popover در HTML یک ابزار قدرتمند و کارآمد برای ایجاد عناصر شناور در وب است. مزایای استفاده از Popover نسبت به روش‌های سنتی قابل توجه است، به ویژه در زمینه کاهش پیچیدگی کد و بهبود دسترس‌پذیری. با توجه به پشتیبانی رو به رشد این API در مرورگرهای مدرن، توسعه‌دهندگان فرانت‌اند تشویق می‌شوند تا این ویژگی جدید را یاد بگیرند و در پروژه‌های جدید خود از آن بهره ببرند.‎

برای مشاهده‌ی مستندات کامل‌تر پاپ‌اور می‌تواند سایت MDN را ببینید.