Popover

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

مؤلفه Popover شبیه Tooltip هاست؛ یک پنجره بازشو (به انگلیسی: Pop-up box) است که هنگام کلیلک کاربر برروی یک عنصر، ظاهر می‌شود. تفاوت آن این است که Popover می‌تواند محتوای بیشتری داشته باشد.[۱]

نحوه ایجاد Popover

برای ایجاد یک Popover، ویژگی data-toggle="popover" را یه یک عنصر اضافه کنید.

از ویژگی title برای تخصیص متن عنوان Popover و از ویژگی data-content برای تخصیص متنی که باید در بدنه Popover نمایش داده شود استفاده کنید:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
توجه: Popoverها باید توسط jQuery مقداردهی اولیه شود: یعنی باید عنصر مورد نظر را انتخاب کرده و متد popover() را فراخوانی کنید.

کد زیر همهٔ Popoverهای سند را فعال می‌کند:

مثال

1 <script>
2 $(document).ready(function(){
3   $('[data-toggle="popover"]').popover();
4 });
5 </script>


مشاهدهٔ نتیجه


مکان Popoverها

بطور پیش فرض، Popover در سمت راست عنصر ظاهر می‌شود.

از ویژگی data-placement برای تنظیم مکان Popover در بالا، پایین، چپ یا راست عنصر استفاده کنید:

مثال

1 <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
2 <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
3 <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
4 <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>


مشاهدهٔ نتیجه

توجه: اگر فضای کافی وجود نداشته باشد، ویژگی‌های مکانی به گونه ای که از آنها انتظار می‌رود عمل نمی‌کنند. برای مثال: اگر مکان دهی بالا در بالای یک صفحه را استفاده کنید (که جای کافی برای آن وجود نداشته باشد)، در عوض popover در پایین یا سمت راست عنصر قرار می‌گیرد (اگر فضای کافی وجود داشته باشد).

بستن Popover

بطور پیش فرض، Popover هنگام کلیک مجدد برروی عنصر بسته می‌شود. با این حال می‌توان از ویژگی data-trigger="focus" استفاده کرد که Popover را هنگام کلیک در خارج از عنصر می‌بندد:

مثال

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>


مشاهدهٔ نتیجه


نکته: اگر بخواهید هنگام قرار گرفتن اشاره گر ماوس روی عنصر، Popover نمایش داده شود، از ویژگی data-trigger با مقدار “hover” استفاده کنید:

مثال

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>


مشاهدهٔ نتیجه


مرجع کامل Popover بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Popover، متدها و رویداد ها(Events)، به مرجع Popover JS بوت استرپ ما مراجعه کنید.


منابع آموزشی