Всплывающие окна

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

Обзор

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

• Popovers полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper чтобы поповеры работали!
• Для всплывающих окон требуется плагин всплывающей подсказки в качестве зависимости.
• Если Вы создаете наш JavaScript из исходного кода, для него требуется util.js.
• Всплывающие окна включены по соображениям производительности, поэтому Вы должны инициализировать их самостоятельно.
• Значения title и content нулевой длины никогда не будут показывать всплывающее окно.
• Укажите container: 'body', чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
• Запуск всплывающих окон для скрытых элементов не будет работать.
• Всплывающие окна для элементов .disabled или disabled должны запускаться в элементе оболочки.
• При запуске от якорей, которые переносятся по нескольким строкам, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrap на Ваших <a> чтобы избежать такого поведения.
• Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из 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="Заголовок всплывающего окна" data-content="А вот и потрясающий контент. Это очень интересно. Верно?">Нажмите, чтобы переключить всплывающее окно</button>

Четыре направления

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Всплывающее окно вверху
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Всплывающее окно справа
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Всплывающее окно снизу
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Всплывающее окно слева
</button>

Отклонить при следующем нажатии

Используйте триггер focus, чтобы закрыть всплывающие окна при следующем щелчке пользователем элемента, отличного от элемента переключения.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Отклоняемое всплывающее окно" data-content="А вот и потрясающий контент. Это очень интересно. Верно?">Отклоняемое всплывающее окно</a>

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

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут навести на них курсор или щелкнуть по ним, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути Вы захотите вызвать всплывающее окно из оболочки <div> или <span> и переопределить pointer-events на отключенном элементе.

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

<span class="d-inline-block" data-toggle="popover" data-content="Отключенное всплывающее окно">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Отключенная кнопка</button>
</span>

Применение

Включить всплывающие окна через JavaScript:

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Параметры

Параметры могут передаваться через атрибуты данных или 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 () {
  // сделайте что-нибудь...
})