Поповеры

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

Обзор

Что нужно знать при использовании плагина popover:

• Поповеры полагаются на стороннюю библиотеку 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должны запускаться на элементе-оболочке.
• При запуске от якорей, которые охватывают несколько строк, всплывающие окна будут центрированы между общей шириной якорей. Используйте white-space: nowrap;на вашем <a>s, чтобы избежать такого поведения.
• Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из 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…
})