Поповери

Документація та приклади додавання спливаючих вікон Bootstrap, подібних до тих, що є в iOS, до будь-якого елемента на вашому сайті.

Огляд

Що потрібно знати під час використання плагіна Popover:

• Popovers покладаються на сторонню бібліотеку Popper.js для позиціонування. Ви повинні включити popper.min.js перед bootstrap.js або використати bootstrap.bundle.min.js/ bootstrap.bundle.js, який містить Popper.js, щоб спливаючі кнопки працювали!
• Поповерам потрібен плагін підказки як залежність.
• Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібноutil.js .
• Поповерси можна використовувати з міркувань продуктивності, тому ви повинні ініціалізувати їх самостійно .
• Нульова довжина titleта contentзначення ніколи не показуватимуть спливаюче зображення.
• Укажіть container: 'body', щоб уникнути проблем із відтворенням у більш складних компонентах (як-от наші групи вводу, групи кнопок тощо).
• Запуск спливаючих вікон на прихованих елементах не працюватиме.
• Поповер для елементів .disabledабо має запускатися на елементі-оболонці.disabled
• Коли запускаються з прив’язок, які перетинають кілька ліній, спливаючі елементи будуть зосереджені між загальною шириною прив’язок. Використовуйте .text-nowrapна вашому <a>s, щоб уникнути такої поведінки.
• Поповери мають бути приховані до того, як їхні відповідні елементи будуть видалені з DOM.
• Поповер можна активувати завдяки елементу в тіньовому DOM.

Продовжуйте читати, щоб побачити, як працюють спливаючі кнопки з деякими прикладами.

Приклад: увімкніть спливаючі вікна всюди

Одним із способів ініціалізації всіх спливаючих вікон на сторінці є вибір їх за data-toggleатрибутом:

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

Приклад: використання containerопції

Якщо у вашому батьківському елементі є деякі стилі, які заважають спливаючому вікну, ви захочете вказати настроюваний container, щоб HTML-код спливаючого елемента з’являвся в цьому елементі.

$(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>

Відхилити після наступного натискання

Використовуйте focusтригер, щоб закрити спливаючі вікна під час наступного натискання користувачем іншого елемента, ніж елемент перемикання.

<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'
})

Відключені елементи

Елементи з disabledатрибутом не є інтерактивними, тобто користувачі не можуть наводити курсор або клацати на них, щоб викликати спливаюче вікно (або спливаючу підказку). Як обхідний шлях, ви захочете запустити спливаюче вікно з обгортки <div>або <span>перевизначити pointer-eventsвимкнений елемент.

Для вимкнених тригерів спливаючого вікна ви також можете віддати перевагу data-trigger="hover"тому, щоб спливаюче вікно з’являлося як негайний візуальний зворотний зв’язок для ваших користувачів, оскільки вони можуть не очікувати клацання вимкненого елемента.

<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>

Використання

Увімкнути спливаючі вікна через JavaScript:

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

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-animation="".

методи

$().popover(options)

Ініціалізує спливаючі вікна для колекції елементів.

.popover('show')

Виявляє спливаюче зображення елемента. Повертається до абонента до того, як спливаюче повідомлення буде фактично показано (тобто до того , як відбудеться shown.bs.popoverподія). Це вважається «ручним» запуском спливаючого повідомлення. Спливаючі повідомлення, заголовок і вміст яких мають нульову довжину, ніколи не відображаються.

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

.popover('hide')

Приховує спливаюче вікно елемента. Повертається до абонента, перш ніж спливаюче повідомлення було фактично приховано (тобто до того , як відбудеться hidden.bs.popoverподія). Це вважається «ручним» запуском спливаючого повідомлення.

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

.popover('toggle')

Перемикає спливаюче вікно елемента. Повертається до абонента до того, як спливаюче повідомлення було фактично показано або приховано (тобто до того, як відбудеться подія shown.bs.popoverабо ). hidden.bs.popoverЦе вважається «ручним» запуском спливаючого повідомлення.

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

.popover('dispose')

Приховує та знищує спливаючий елемент елемента. Поповери, які використовують делегування (які створюються за допомогою параметра selector) , не можуть бути окремо знищені на нащадкових тригерних елементах.

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

.popover('enable')

Надає можливість показу спливаючого вікна елемента. Поповери ввімкнено за умовчанням.

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

.popover('disable')

Усуває можливість показу спливаючого вікна елемента. Спливаюче вікно можна буде показати, лише якщо його повторно ввімкнути.

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

.popover('toggleEnabled')

Перемикає можливість показувати або приховувати спливаюче вікно елемента.

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

.popover('update')

Оновлює позицію спливного вікна елемента.

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

Події

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