Popover در Bootstrap ورژن 4

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

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

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

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

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

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

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

مکان Popovers

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

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

<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 را هنگام کلیک کردن در خارج از عنصر بسته می کند:

<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" استفاده کنید:

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