آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

بررسی اجمالی 

چیزهایی که هنگام استفاده از پلاگین popover می دانید:

1-Popovers بر روی Popper.js بخشی کتابخانه 3rd  برای موقعیت قرار می گیرند. شما باید popper.min.js را قبل از bootstrap.js قرار دهید یا از bootstrap.bundle.min.js / bootstrap.bundle.js استفاده کنید که شامل Popper.js است تا popovers کار کند!

2-Popovers به ​​عنوان یک وابستگی به افزونه tooltip نیاز دارند.

3-اگر جاوا اسکریپت خود را از منبع ایجاد می کنید، به util.js نیاز دارد.

4-Popovers برای دلایل عملکرد انتخاب می شوند، بنابراین شما باید خودتان آنها را اولویت بندی کنید.

5-مقادیر عنوان و مقادیر صفر هرگز یک popover را نشان نخواهند داد.

6-مشخص کردن container: 'body' برای جلوگیری از مشکلات تفسیر در اجزای پیچیده تر

7-اجرای پلاگین ها در عناصر پنهان کار نخواهد کرد.

8-Popovers برای عناصر غیرفعال یا غیرفعال شده باید بر روی یک عنصر پیچیده اجرا شوند.

9-هنگامی که از لنگرهایی که در میان خطوط مختلف پیچیده می شود، popovers بین عرض کلی لنگرها متمرکز می شوند. استفاده از ;white-space: nowrap در مورد <a> خود را برای اجتناب از این رفتار است.

10-Popovers قبل از حذف عناصر مربوطه از DOM پنهان می شوند.

 ببینید که چگونه popovers با برخی از نمونه ها کار می کند.

 

مثال: popovers را در همه جا فعال کنید.

یک راه برای مقداردهی اولیه همه popovers در یک صفحه، انتخاب آنها با ویژگی data-toggle است:

 $(function () { $('[data-toggle="popover"]').popover() })

 

مثال: با استفاده از گزینه ظروف 

هنگامی که شما برخی از سبک ها در یک عنصر والدین که با popover مواجه می شوید، می خواهید یک ظرف سفارشی را مشخص کنید تا HTML popover در آن عنصر ظاهر شود.

 $(function () { $('.example-popover').popover({ container: 'body' }) })

 

مثال 

 

 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

 

چهارجهت

چهار گزینه در دسترس هستند: بالا، راست، پایین، و سمت چپ تراز.

 <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button>

 

دکمه بعدی را رد کنید

 

 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

 

 $('.popover-dismiss').popover({ trigger: 'focus' })

 

عناصر غیر فعال 

عناصر دارای ویژگی غیرفعال تعاملی نیستند، به این معنی که کاربران نمیتوانند روی آنها کلیک کنند و یا به آنها کلیک کنند تا یک popover (یا tiptip) را به نمایش بگذارند. به عنوان یک راه حل، شما می خواهید که popover از <div> یا <span> برگردانده شود و رویدادهای اشاره گر را در عنصر غیرفعال، غیرفعال کنید.

برای triggers popover غیرفعال، شما همچنین ممکن است اطلاعات "trigger = "hover را ترجیح دهید تا popover به عنوان بازخورد بصری فوری برای کاربران شما ظاهر شود، زیرا ممکن است انتظار نداشته باشید بر یک عنصر غیرفعال کلیک کنید.

 <span class="d-inline-block" data-toggle="popover" data-content="Disabled popover"> <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button> </span>

 

استفاده 

فعال کردن popovers از طریق جاوا اسکریپت:

 $('#example').popover(options)

 

گزینه 

گزینه ها می توانند از طریق ویژگی های داده یا جاوا اسکریپت منتقل شوند. برای ویژگی های داده، نام گزینه را به داده اضافه کنید، همانطور که در data-animation = "" دیدید.

Name Type Default Description
animation boolean true Apply a CSS fade transition to the popover
container string | element | false false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

content string | element | function ''

Default content value if data-content attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

delay number | object 0

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }

html boolean false Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'right'

How to position the popover - auto | top | bottom | left | right.
When auto is specified, it will dynamically reorient the popover.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The thiscontext is set to the popover instance.

selector string | false false If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popoverclass.

title string | element | function ''

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

trigger string 'click' How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.
offset number | string 0 Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.
fallbackPlacement string | array 'flip' Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs
boundary string | element 'scrollParent' Overflow constraint boundary of the popover. Accepts the values of 'viewport''window''scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

 

متد

$().popover(options)

ابتدا popovers را برای مجموعه عنصری به کار می گیرد.

 

.popover('show')

قبل از اینکه popover در واقع نشان داده شود، فراخوانی می شود. این در نظر گرفته شده "دستی" راه اندازی popover است. Popovers که هر دو عنوان و محتوا صفر هستند هرگز نمایش داده نمی شود.

 $('#element').popover('show')

 

.popover('hide')

پنهان کردن عنصر popover. قبل از اینکه popover در واقع پنهان شده باشد، فراخوانی می شود. این در نظر گرفته شده "دستی" راه اندازی popover است.

 $('#element').popover('hide')

 

.popover('toggle')

تغییر ظاهر عنصر بازگشت به تماس گیرنده قبل از اینکه popover در واقع نشان داده شده یا پنهان شده است. این به عنوان یک "دستی" محرک popover در نظر گرفته شده است.

 $('#element').popover('toggle')

 

.popover('dispose')

Popovers هایی که از delegate استفاده می کنند (که با استفاده از گزینه selector ایجاد می شوند) نمی توانند به طور جداگانه بر روی عناصر نابود شوند.

 $('#element').popover('dispose')

 

.popover('enable')

یک عنصر ظاهر را قادر می سازد که نشان داده شود. Popovers به ​​طور پیش فرض فعال هستند.

 $('#element').popover('enable')

 

.popover('disable')

توانایی نمایش popover element را پاک می کند. اگر دوباره فعال شود، popover قادر خواهد بود نشان داده شود.

 $('#element').popover('disable')

 

.popover('toggleEnabled')

توانایی نمایش popover عنصر را نشان می دهد یا پنهان می کند.

 $('#element').popover('toggleEnabled')

 

.popover('update')

به روز رسانی موقعیت popover عنصر.

 $('#element').popover('update')

 

مناسبت ها 

Event Type Description
show.bs.popover This event fires immediately when the show instance method is called.
shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popover This event is fired immediately when the hide instance method has been called.
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.popover This event is fired after the show.bs.popover event when the popover template has been added to the DOM.

 

 $('#myPopover').on('hidden.bs.popover', function () { // do something… })