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)

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

Щоб дозволити користувачам клавіатури активувати ваші спливаючі елементи, ви повинні додавати їх лише до елементів HTML, які традиційно фокусуються клавіатурою та є інтерактивними (наприклад, посилання або елементи керування формою). Хоча довільні HTML-елементи (такі як <span>s) можна зробити доступними для фокусування, додавши tabindex="0"атрибут, це додасть потенційно дратівливі та заплутані позиції табуляції на неінтерактивних елементах для користувачів клавіатури, і більшість допоміжних технологій наразі не повідомляють вміст спливаючого вікна в цій ситуації . Крім того, не покладайтеся лише на hoverтригер для ваших спливаючих повернень, оскільки це унеможливить їх ініціювання для користувачів клавіатури.

Хоча ви можете вставляти насичений, структурований HTML у спливаючих вікнах за допомогою цієї htmlопції, ми настійно рекомендуємо вам уникати додавання надмірної кількості вмісту. Те, як спливаючі елементи зараз працюють, полягає в тому, що після відображення їхній вміст прив’язується до тригерного елемента за допомогою aria-describedbyатрибута. У результаті весь вміст popover буде оголошено користувачам допоміжних технологій як один довгий безперервний потік.

Крім того, хоча можна також включити інтерактивні елементи керування (такі як елементи форми або посилання) у ваш спливаюче вікно (шляхом додавання цих елементів до whiteListабо дозволених атрибутів і тегів), майте на увазі, що наразі спливне вікно не керує порядком фокусування клавіатури. Коли користувач клавіатури відкриває спливаюче вікно, фокус залишається на елементі запуску, і оскільки спливаюче вікно зазвичай не слідує відразу за тригером у структурі документа, немає гарантії, що переміщення вперед/натисканняTABперемістить користувача клавіатури до самого спливаючого вікна. Коротше кажучи, просте додавання інтерактивних елементів керування до спливаючого вікна, ймовірно, зробить ці елементи керування недоступними/непридатними для користувачів клавіатури та допоміжних технологій або, принаймні, призведе до нелогічного загального порядку фокусування. У таких випадках краще використовувати модальне діалогове вікно.

Опції

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

Зауважте, що з міркувань безпеки параметри sanitize, sanitizeFnі whiteListне можна надавати за допомогою атрибутів даних.

Ім'я Тип За замовчуванням опис
анімація логічний правда Застосуйте 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 .
продезінфікувати логічний правда Увімкніть або вимкніть санітарну обробку. Якщо активовано 'template', 'content'і 'title'параметри будуть очищені.
білий список об'єкт Значення за замовчуванням Об’єкт, який містить дозволені атрибути та теги
очиститиFn нуль | функція нуль Тут ви можете встановити власну функцію дезінфекції. Це може бути корисним, якщо ви віддаєте перевагу використанню спеціальної бібліотеки для виконання санітарної обробки.
popperConfig нуль | об'єкт нуль Щоб змінити конфігурацію Bootstrap за замовчуванням Popper.js, перегляньте конфігурацію 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...
})