Popover در Bootstrap ورژن 4

Popover در Bootstrap ورژن 4

Popover شبیه به راهنمایی ها است؛ این یک جعبه پاپ آپ است که وقتی کاربر روی یک عنصر کلیک میکند ظاهر میشود. تفاوت در این است که popover مطالب بیشتری می تواند داشته باشد.

چگونه یک Popover ایجاد کنیم

برای ایجاد یک popover، ویژگی attribute-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>

 

توجه: Popovers باید با jQuery راه اندازی شوند: عنصر مشخص شده را انتخاب کرده و با استفاده از روش popover (). به کار ببرید

کد زیر همه popovers را در سند فعال می کند:

ساخت popover
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>
مشاهده مثال

مکان Popovers

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

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

موقعیت popover
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
مشاهده مثال

بسته شدن popover

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

ویژگی data-trigger = "focus" استفاده کنید که popover را هنگام کلیک کردن در خارج از عنصر بسته می کند:

بستن 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>
مشاهده مثال

 

نکته: اگر شما می خواهید displayover pointer در هنگام حرکت اشاره گر ماوس بر روی عنصر نمایش داده شود، از ویژگی trigger data با مقدار "hover" استفاده کنید:

بستن popover
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز