Source

Поповери

Документація та приклади додавання спливаючих вікон 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.

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

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

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

Одним із способів ініціалізації всіх спливаючих вікон на сторінці є вибір їх за 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>тег, а не<button> тег, і ви також повинні включити tabindexатрибут.

<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="".

Ім'я Тип За замовчуванням опис
анімація логічний правда Застосуйте CSS-зникнення переходу до спливаючого вікна
контейнер рядок | елемент | помилковий помилковий

Додає спливаюче вікно до певного елемента. Приклад: container: 'body'. Цей параметр особливо корисний тим, що він дозволяє розташувати спливне вікно в потоці документа поблизу елемента запуску, що запобігатиме відпливу спливного вікна від елемента запуску під час зміни розміру вікна.

вміст рядок | елемент | функція ''

Значення вмісту за умовчанням, якщо data-contentатрибут відсутній.

Якщо задано функцію, її буде викликано з thisпосиланням на елемент, до якого приєднано спливаюче зображення.

затримка номер | об'єкт 0

Затримка показу та приховування спливаючого вікна (мс) - не стосується типу ручного запуску

Якщо вказано число, затримка застосовується як для приховування, так і для показу

Структура об'єкта:delay: { "show": 500, "hide": 100 }

html логічний помилковий Вставте HTML у спливаюче вікно. Якщо false, textметод jQuery використовуватиметься для вставлення вмісту в DOM. Використовуйте текст, якщо вас турбують атаки XSS.
розміщення рядок | функція "право"

Як розташувати поповер - авто | верх | нижня | ліворуч | правильно.
Якщо autoвказано, він динамічно переорієнтує спливне вікно.

Коли функція використовується для визначення розміщення, вона викликається зі спливаючим вузлом DOM як першим аргументом і ініціюючим елементом DOM вузлом як другим. Контекст thisвстановлено для екземпляра спливаючого вікна.

селектор рядок | помилковий помилковий Якщо надано селектор, спливаючі об’єкти будуть делеговані вказаним цілям. На практиці це використовується, щоб увімкнути додавання спливаючих зображень до динамічного вмісту HTML. Перегляньте це та інформативний приклад .
шаблон рядок '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Базовий HTML для створення спливаючого вікна.

Popover's titleбуде введено в .popover-header.

Popover's contentбуде введено в .popover-body.

.arrowстане стрілкою поповера.

Зовнішній елемент оболонки повинен мати .popoverклас.

назва рядок | елемент | функція ''

Значення назви за умовчанням, якщо titleатрибут відсутній.

Якщо задано функцію, її буде викликано з thisпосиланням на елемент, до якого приєднано спливаюче зображення.

тригер рядок 'клік' Як спрацьовує спливаюче вікно - натисніть | навести | фокус | посібник. Ви можете передати кілька тригерів; розділіть їх пробілом. manualне можна поєднувати з будь-яким іншим тригером.
зсув номер | рядок 0 Зміщення спливного вікна відносно його цілі. Для отримання додаткової інформації зверніться до офсетної документації Popper.js .
резервне розміщення рядок | масив 'фліп' Дозволяє вказати, яку позицію використовуватиме Поппер у резервному режимі. Для отримання додаткової інформації зверніться до документів про поведінку Popper.js
межа рядок | елемент 'scrollParent' Межа обмеження переповнення спливаючого вікна. Приймає значення 'viewport', 'window', 'scrollParent'або посилання HTMLElement (тільки для JavaScript). Для отримання додаткової інформації зверніться до документів PreventOverflow Popper.js .

Атрибути даних для окремих поповерів

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

методи

Асинхронні методи та переходи

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

Дивіться нашу документацію JavaScript для отримання додаткової інформації .

$().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')

Події

Тип події опис
show.bs.popover Ця подія запускається негайно, коли showвикликається метод екземпляра.
показано.bs.popover Ця подія запускається, коли спливаюче вікно стає видимим для користувача (чекатиме, поки завершаться переходи CSS).
hide.bs.popover Ця подія запускається негайно після hideвиклику методу екземпляра.
hidden.bs.popover Ця подія запускається, коли спливаюче вікно перестає бути прихованим від користувача (чекатиме, поки завершаться переходи CSS).
вставлений.bs.popover Ця подія запускається після show.bs.popoverподії, коли шаблон спливаючого зображення було додано до DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})